기기 모드를 사용하면 휴대기기에서 페이지가 어떻게 표시되고 작동하는지 짐작할 수 있습니다.
개요
기기 모드는 Chrome DevTools의 기능 모음으로 휴대기기를 시뮬레이션합니다. 기능은 다음과 같습니다.
- 모바일 표시 영역 시뮬레이션
- CPU 제한
- 네트워크 제한
- 또한 센서 패널에서 다음을 수행합니다.
<ph type="x-smartling-placeholder">
- </ph>
- 위치정보 시뮬레이션
- 방향 설정
제한사항
기기 모드는 페이지에 페이지가 어떻게 표시되는지에 대한 1차 근사치라고 생각하면 됩니다. 있습니다. 기기 모드를 사용하면 실제로 휴대기기에서 코드를 실행하지 않아도 됩니다. 시뮬레이션 모바일 사용자 환경을 개선할 수 있습니다.
DevTools가 절대로 시뮬레이션할 수 없는 휴대기기의 몇 가지 측면이 있습니다. 예를 들어 모바일 CPU의 아키텍처는 노트북 또는 데스크톱 CPU의 아키텍처와 매우 다릅니다. 확실하지 않은 경우 실제로 휴대기기에서 페이지를 실행하는 것이 가장 좋습니다. Remote 사용 디버깅을 사용하면 노트북이나 데스크톱에서 페이지 코드를 보고, 변경하고, 디버그하고, 프로파일링할 수 있습니다. 모바일 장치에서 실행됩니다.
기기 툴바 열기
기기 툴바를 열려면 다음 단계를 따르세요.
- DevTools를 엽니다.
- 상단의 작업 모음에 있는 devices 기기 툴바 전환을 클릭합니다.
모바일 표시 영역 시뮬레이션
기본적으로 기기 툴바는 표시 영역에서 크기가 반응형으로 설정된 상태로 열립니다. 측정기준 드롭다운을 사용하여 특정 휴대기기의 크기를 시뮬레이션할 수 있습니다.
반응형 표시 영역 모드
핸들을 드래그하여 필요한 크기로 표시 영역의 크기를 조절합니다. 또는 특정 값 입력
크기를 입력해야 합니다. 이 예에서 너비는 480로 설정되고 높이는 다음과 같이 설정됩니다.
415
또는 너비 사전 설정 막대를 사용하여 클릭하여 너비를 다음 중 하나로 설정할 수 있습니다.
| 모바일 S | 모바일 M | 모바일 왼쪽 | 태블릿 | 노트북 | 노트북 L | 4K |
|---|---|---|---|---|---|---|
| 320px | 375픽셀 | 425픽셀 | 768픽셀 | 1024픽셀 | 1440픽셀 | 2560픽셀 |
미디어 쿼리 표시
표시 영역 위에 미디어 쿼리 중단점을 표시하려면 
옵션 더보기 >를 클릭합니다. 미디어 쿼리 표시.
이제 DevTools가 표시 영역 위에 막대 두 개를 추가로 표시합니다.
max-width중단점이 있는 파란색 막대min-width중단점이 있는 주황색 막대
중단점 사이를 클릭하여 표시 영역의 너비를 변경하여 중단점이 트리거되도록 합니다.
상응하는 @media 선언을 찾으려면 중단점 사이를 마우스 오른쪽 버튼으로 클릭하고 Reveal in source code를 선택합니다. DevTools의 Editor에 해당하는 줄에서 Sources 패널이 열립니다.
기기 픽셀 비율 설정
기기 픽셀 비율 (DPR)은 하드웨어 화면의 물리적 픽셀과 논리 (CSS) 픽셀 간의 비율입니다. 즉, DPR은 Chrome에 CSS 픽셀을 그리는 데 사용할 화면 픽셀 수를 알려줍니다. Chrome은 HiDPI (High Dots Per Inch) 디스플레이에서 그릴 때 DPR 값을 사용합니다.
DPR 값을 설정하려면 다음 단계를 따르세요.
옵션 더보기
를 클릭합니다. > 기기 픽셀 비율을 추가합니다.
표시 영역 상단의 작업 모음에 있는 새 DPR 드롭다운 메뉴에서 DPR 값을 선택합니다.
기기 유형 설정
기기 유형 목록을 사용하여 휴대기기 또는 데스크톱 기기를 시뮬레이션합니다.
상단의 작업 표시줄에 목록이 표시되지 않으면 옵션 더보기 
를 선택합니다. 기기 유형을 추가합니다.
다음 표는 옵션 간의 차이점을 설명합니다. 렌더링 방법이란
Chrome에서 페이지를 모바일로 렌더링할지 또는 데스크톱 표시 영역으로 렌더링할지 결정합니다. 커서 아이콘은 커서의
표시됩니다. 실행된 이벤트는 페이지 실행 여부를 나타냅니다.
페이지와 상호작용할 때 touch 또는 click 이벤트.
| 옵션 | 렌더링 방법 | 커서 아이콘 | 실행된 이벤트 |
|---|---|---|---|
| 모바일 | 모바일 | 원 | 터치 |
| 모바일 (터치 없음) | 모바일 | 보통 | 클릭 |
| 데스크톱 | 데스크톱 | 보통 | 클릭 |
| 데스크톱 (터치) | 데스크톱 | 원 | 터치 |
기기별 모드
특정 휴대기기의 크기를 시뮬레이션하려면 크기 목록에서 기기를 선택합니다.
자세한 내용은 맞춤 휴대기기 추가를 참조하세요.
표시 영역을 가로 방향으로 회전
표시 영역을 가로 방향으로 회전하려면 screen_rotation 회전을 클릭합니다.
기기 툴바가 좁으면 회전 
버튼이 사라집니다.
방향 설정도 참고하세요.
듀얼 화면 모드 전환
일부 기기(예: Surface Duo)에는 화면이 두 개 있으며 한 쪽 또는 두 개의 화면을 모두 활성화하여 사용하는 두 가지 방법이 있습니다.
듀얼 화면과 단일 화면 간에 전환하려면 툴바에서 devices_fold 듀얼 화면 모드 전환을 클릭합니다.
기기 상태 설정
Asus Zenbook Fold와 같은 일부 기기에는 폴더블 화면이 있습니다. 이러한 화면은 연속 또는 접힌 상태입니다. 연속된 자세란 '평평한' 상태를 의미합니다. 위치는 디스플레이 섹션 사이의 각도를 형성합니다.
기기 상태를 설정하려면 툴바의 해당하는 드롭다운 메뉴에서 연속 또는 접힘을 선택합니다.
기기 프레임 표시
Nest Hub와 같은 특정 휴대기기의 크기를 시뮬레이션하려면 옵션 더보기 
>를 선택합니다. Show device frame을 사용하여 표시 영역 주변에 실제 기기 프레임을 표시합니다.
이 예에서 DevTools는 Nest Hub의 프레임을 표시합니다.
맞춤 휴대기기 추가
맞춤 기기를 추가하려면 다음 단계를 따르세요.
기기 목록을 클릭한 다음 수정을 선택합니다.
설정 설정 > 기기 탭을 선택한 다음 지원되는 기기 목록에서 기기를 선택하거나 맞춤 기기 추가를 클릭하여 내 기기를 추가합니다.
직접 추가하려면 기기의 이름, 너비, 높이를 입력한 다음 추가를 클릭합니다.
기기 픽셀 비율, 사용자 에이전트 문자열, 기기 유형 입력란은 선택사항입니다. 기기 유형 필드는 기본적으로 모바일로 설정된 목록입니다.
표시 영역으로 돌아가서 크기 목록에서 새로 추가된 기기를 선택합니다.
눈금자 표시
옵션 더보기 
를 클릭합니다. > 눈금자를 표시하여 눈금자를 표시합니다. 눈금자의 크기 단위는 픽셀입니다.
DevTools에서 표시 영역의 상단과 왼쪽에 눈금자를 표시합니다.
특정 표시의 눈금자를 클릭하여 표시 영역의 너비와 높이를 설정합니다.
표시 영역 확대/축소
확대/축소 목록을 사용하여 확대하거나 축소합니다.
스크린샷 캡처
표시 영역에 표시되는 화면의 스크린샷을 캡처하려면 
옵션 더보기 >를 클릭합니다. 스크린샷을 캡처합니다.
표시 영역에 표시되지 않는 콘텐츠를 포함하여 전체 페이지의 스크린샷을 캡처하려면 동일한 메뉴에서 원본 크기 스크린샷 캡처를 선택합니다.
기기별 모드에서 스크린샷을 캡처할 때 기기 프레임을 포함하려면 먼저 기기 프레임 표시를 선택한 다음 이전 안내에 따라 스크린샷 캡처를 클릭합니다.
DevTools로 스크린샷을 찍는 다른 방법을 알아보려면 DevTools로 스크린샷을 캡처하는 4가지 방법을 참고하세요.
네트워크 및 CPU 제한
네트워크와 CPU를 모두 제한하려면 Mid-tier mobile 또는 Low-end mobile의 제한 목록.
Mid-tier mobile은 빠른 3G를 시뮬레이션하고 CPU를 제한하여 CPU를 스로틀링하여 있습니다. Low-end mobile: 느린 3G를 시뮬레이션하고 CPU를 평소보다 6배 느리게 스로틀링합니다. 유지 제한은 노트북이나 데스크탑의 일반적인 성능에 상대적이라는 점을 명심하세요.
기기 툴바가 좁으면 제한 목록이 숨겨집니다.
CPU만 스로틀링
네트워크를 제외한 CPU만 조절하려면 Performance(성능) 패널로 이동하여 Capture(캡처)를 클릭합니다.
설정 
및
그런 다음 CPU 목록에서 4배 감속, 6배 감속 또는 20배 감속을 선택합니다.
네트워크만 제한
CPU를 제외한 네트워크만 제한하려면 네트워크 패널로 이동하여 빠른 3G를 선택합니다. Throttle 목록에서 느린 3G를 선택합니다.
또는 Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, ChromeOS)를 눌러
메뉴에서 3G를 입력하고 Enable fast 3G throttling 또는 Enable 느린 3G throttling을 선택합니다.
Performance(성능) 패널에서 네트워크 제한을 설정할 수도 있습니다. Capture Settings(캡처 설정)를 클릭합니다.
다음 선택
네트워크 목록에서 빠름 3G 또는 느린 3G를 선택합니다.
센서 에뮬레이션
Sensors 패널을 사용하여 위치정보를 재정의하고, 기기 방향을 시뮬레이션하고, 터치를 강제 실행하고, 유휴 상태를 에뮬레이션합니다.
다음 섹션에서는 위치정보를 재정의하고 기기 방향을 설정하는 방법을 간단히 살펴봅니다. 기능의 전체 목록은 기기 센서 에뮬레이션을 참고하세요.
위치정보 재정의
위치정보 재정의 UI를 열려면 DevTools 맞춤설정 및 제어를 클릭합니다.
을 클릭한 다음 도구 더보기 >를 선택합니다. 센서.
또는 Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, ChromeOS)를 눌러
메뉴에서 Sensors를 입력한 후 Show Sensors를 선택합니다.
위치 목록에서 사전 설정 중 하나를 선택하거나 기타...를 선택하여 좌표를 직접 설정할 수도 있고, 사용할 수 없는 위치를 선택하여 위치정보가 오류 상태입니다.
방향 설정
방향 UI를 열려면 Customize and control DevTools를 클릭합니다.
을 클릭한 다음 도구 더보기 >를 선택합니다. 센서.
또는 Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, ChromeOS)를 눌러
메뉴에서 Sensors를 입력한 후 Show Sensors를 선택합니다.
방향 목록에서 사전 설정 중 하나를 선택하거나 맞춤 방향을 선택하여 알파, 베타, 감마 값을 소유할 수 있습니다.
