Firefox 브라우저에서 모바일 장치를 시뮬레이션하고 디버그하려면 어떻게해야합니까?
모바일 장치 모드에서 내 웹 사이트를 보여주는 도구를 찾고 있습니다. 또한 Firebug와 같은 도구로 내 웹 사이트를 디버깅하고 싶습니다. 또는 ... 더 나은 Firebug를 사용할 수 있습니다. 이를 위해 확립 된 솔루션은 무엇입니까?
도구 자체 브라우저 (Firefox, IE, Chrome ...)를 사용하여 JavaScript를 디버깅 할 수 있습니다.
크기 조정과 관련하여 Firefox / Chrome에는 Ctrl+ Shift+ IOR을 통해 액세스 할 수있는 자체 리소스가 있습니다 F12. "스타일 편집기"탭으로 이동하고 "적응 형 / 반응 형 디자인"아이콘을 클릭합니다.
이전 Firefox 버전
새로운 Firefox / Firebug
크롬
* 또 다른 방법은 "Web Developer"와 같은 애드온을 설치하는 것입니다.
Ctrl+ Shift+ 를 사용하여 반응 형 디자인 도구를 사용합니다 M.
대부분의 웹 애플리케이션은 HTTP 헤더를 기반으로 모바일 장치를 감지합니다.
웹 사이트에서 HTTP 헤더를 사용하여 모바일 장치를 식별하는 경우 다음을 수행 할 수 있습니다.
- Firefox 브라우저에 헤더 수정 플러그인 추가 ( https://addons.mozilla.org/en-US/firefox/addon/modify-headers/ )
- 플러그인 수정 헤더 사용 :
- 헤더 탭 선택-> 조치 '추가'선택
- 예를 들어 iPhone을 시뮬레이션하려면 이름
User-Agent과 값이 있는 헤더를 추가 합니다.Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3 - '추가'버튼 클릭
- 그 후에 Firefox에서 웹 애플리케이션의 모바일 버전을보고 Firebug 플러그인을 사용할 수 있어야합니다.
도움이 되었기를 바랍니다.
Firefox 애드온 User Agent Overrider를 사용할 수 있습니다 . 이 애드온을 사용하면 원하는 사용자 에이전트를 사용할 수 있습니다.
Firefox 28/Android: Mozilla/5.0 (Android; Mobile; rv:28.0) Gecko/24.0 Firefox/28.0
웹 사이트가 사용자 에이전트를 통해 모바일 장치를 감지하면 이러한 방식으로 레이아웃을 테스트 할 수 있습니다.
'17 년 11 월 업데이트 :
Firefox 57의 출시와 웹 확장의 도입으로이 부가 기능은 더 이상 사용할 수 없습니다. 또는 general.useragent.override구성에서 Firefox 기본 설정 을 편집 할 수 있습니다.
- 주소 표시 줄 유형
about:config - 검색
general.useragent.override - 환경 설정이 없으면 about : config 페이지를 마우스 오른쪽 버튼으로 클릭하고 새로 만들기를 클릭 한 다음 문자열을 선택합니다.
- 새 환경 설정의 이름을 general.useragent.override로 지정하십시오.
- 값을 원하는 사용자 에이전트로 설정하십시오.
도구-> 웹 개발자-> 반응 형 디자인 뷰에서 사용할 수있는 "반응 형 디자인 뷰"를 사용합니다. 다양한 화면 크기에 대해 CSS를 테스트 할 수 있습니다.
이미 언급 한 반응 형 디자인 모드 (개발 도구를 통해)를 사용하여 Random Agent Spoofer 플러그인 과 함께 사용자 지정 화면 크기를 설정 하여 헤더를 수정하여 모바일, 태블릿 등을 사용하는 것을 시뮬레이션 할 수 있습니다. 많은 웹 사이트에서 이에 따라 콘텐츠를 지정합니다. 식별 된 헤더.
개발 도구로 현재 Chrome 개발 도구와 매우 유사하게 된 내장 개발자 도구 ( Mac 용 Ctrl+ Shift+ I또는 Cmd+ Shift+ I)를 사용할 수 있습니다.
크롬 인스펙터와 함께 크롬 토글 장치 툴바를 사용하는 것이 더 낫다고 생각합니다. 응답 모드와 함께 사용자 에이전트 스위치를 제공합니다.
'programing' 카테고리의 다른 글
| AngularJS를 사용하여 앵커 태그 활성화 / 비활성화 (0) | 2021.01.14 |
|---|---|
| Eclipse에서 애플리케이션 힙 크기를 늘리는 방법은 무엇입니까? (0) | 2021.01.13 |
| PEP8 표준을 준수하기에는 너무 많은 인수로 함수 정의 (0) | 2021.01.13 |
| JavaScript에서 ""== [null]이 true 인 이유는 무엇입니까? (0) | 2021.01.13 |
| PACKETS와 FRAMES의 차이점 (0) | 2021.01.13 |