Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Chrome DevTools에서 Device Mode로 휴대기기 시뮬레이션

Device Mode를 이용해 페이지가 휴대기기에서 어떻게 나타나고 작동하는지 짐작할 수 있습니다.

Device Mode는 휴대 기기 시뮬레이션을 돕는 Chrome DevTools의 여러 기능의 집단을 이르는 말입니다. 이러한 기능에는 다음이 포함됩니다.

제한 사항

Device Mode를 휴대 기기에서 페이지가 어떻게 나타나고 어떤 경험을 주는지에 대한 1차 근사값으로{:.external} 생각해야 합니다. Device Mode를 이용하면 코드를 휴대 기기에서 직접 실행할 필요가 없습니다. 노트북이나 데스크탑에서 모바일 사용자 환경을 시뮬레이션합니다.

DevTools에서 절대로 시뮬레이션할 수 없는 휴대기기의 몇 가지 측면이 있습니다. 예를 들어, 모바일 CPU의 아키텍처는 노트북이나 데스크탑 CPU의 아키텍처와 매우 다릅니다. 미심쩍을 때는 실제로 페이지를 휴대기기에서 실행하는 것이 가장 좋습니다. 원격 디버깅을 사용하여 페이지의 코드가 휴대 기기에서 실제로 실행되는 동안 노트북이나 데스크탑에서 페이지 코드를 보고, 변경하고, 디버깅하거나 프로파일링하세요.

모바일 표시 영역 시뮬레이션

Toggle Device Toolbar 기기 툴바 전환을 클릭하여{: .inline-icon } 모바일 표시 영역을 시뮬레이션하는 UI를 엽니다.

Device Toolbar.
그림 1. Device Toolbar.

기본적으로 Device Toolbar는 Responsive Viewport 모드에서 열립니다.

Responsive Viewport 모드

핸들을 드래그하여 필요한 크기로 표시 영역의 크기를 조절합니다. 또는, 너비 및 높이 상자에 특정 값을 입력합니다. 그림 2에서 너비는 628, 높이는 662로 설정되었습니다.

Responsive Viewport 모드일 때 표시 영역의 크기를 변경하기 위한 핸들
그림 2. Responsive Viewport 모드일 때 표시 영역의 크기를 변경하기 위한 핸들

Show media queries

미디어 쿼리 중단점을 표시 영역 위에 표시하려면, More options를 클릭한 다음 Show media queries를 선택합니다.

Show media queries.
그림 3. Show media queries.

중단점을 클릭하여 표시 영역의 너비를 변경함으로써 중단점을 트리거시킵니다.

중단점을 클릭하여 표시 영역의 너비를 변경합니다.
그림 4. 중단점을 클릭하여 표시 영역의 너비를 변경합니다.

Mobile Device Viewport 모드

특정 휴대 기기의 치수를 시뮬레이션하려면 Device 목록에서 기기를 선택합니다.

Device 목록.
그림 5. Device 목록

표시 영역을 가로 모드 방향으로 회전

Rotate 회전을 클릭하여{: .inline-icon } 표시 영역을 가로 모드 방향으로 회전합니다.

가로 모드 방향.
그림 6. 가로 모드 방향.

Device Toolbar가 좁으면 Rotate 버튼이 사라집니다.

Device Toolbar.
그림 7. Device Toolbar.

방향 설정도 참조하세요.

Show device frame

iPhone 6와 같은 특정 휴대 기기의 치수를 시뮬레이션 하려면 More options를 연 다음 Show device frame을 선택하여 표시 영역 주변에 물리적 기기 프레임을 표시합니다.

참고: 특정 기기의 기기 프레임을 찾을 수 없다면, DevTools에는 해당 특정 옵션을 갖추고 있지 않다는 것을 의미합니다.

Show device frame.
그림 8. Show device frame.
iPhone 6의 기기 프레임.
그림 9. iPhone 6의 기기 프레임.

Show rulers

More options를 클릭한 다음 Show rulers를 선택하여 표시 영역 상단과 왼쪽에 눈금자를 표시합니다. 눈금자의 크기 단위는 픽셀입니다.

Show rulers.
그림 10. Show rulers.
표시 영역 상단 및 왼쪽의 눈금자.
그림 11. 표시 영역 상단 및 왼쪽의 눈금자.

표시 영역 확대/축소

Zoom 목록을 사용하여 확대/축소합니다.

Zoom.
그림 11. Zoom

네트워크 및 CPU 스로틀링

네트워크 및 CPU를 스로틀링하려면 Throttle 목록에 Mid-tier mobile 또는 Low-end mobile를 선택합니다.

Throttle 목록.
그림 12. Throttle 목록.

Mid-tier mobile은 빠른 3G를 시뮬레이션하고 컴퓨터의 CPU를 스로틀링하여 일반 속도보다 4배 느리게 합니다. Low-end mobile은 느린 3G를 시뮬레이션하고 컴퓨터의 CPU를 스로틀링하여 일반 속도보다 6배 느리게 합니다. 스로틀링은 여러분의 노트북이나 데스크탑의 일반 성능에 상대적이라는 점을 유념하세요.

Throttle목록은 Device Toolbar가 좁으면 숨겨집니다.

Device Toolbar.
그림 13. Device Toolbar.

CPU만 스로틀링

네트워크는 제외하고 CPU만 스로틀링하려면, Performance 패널로 이동하여 Capture Settings 설정 캡처를 클릭한 다음{:.inline-icon}, CPU 목록에서 4x slowdown 또는 6x slowdown을 선택합니다.

CPU 목록.
그림 14. CPU 목록

네트워크만 스로틀링

CPU를 제외한 네트워크만 스로틀링하려면 Network 패널로 이동하여 Throttle 목록에서 Fast 3G 또는 Slow 3G를 선택합니다.

Throttle 목록.
그림 14. Throttle 목록.

또는 Cmmd+Shift+P(Mac)를 누르거나 Ctrl+Shift+P(Windows, Linux, Chrome OS)를 눌러 Command Menu를 열고, 3G를 입력한 다음 Enable fast 3G throttling 또는 Enable slow 3G throttling을 선택합니다.

Command Menu.
그림 15. Command Menu

Performance 패널에서도 네트워크 스로틀링을 설정할 수 있습니다. Capture Settings 설정 캡처를 클릭한 다음,{: .inline-icon } Network 목록에서 Fast 3G 또는 Slow 3G를 선택합니다.

Performance 패널에서 네트워크 스로틀링 설정.
그림 16. Performance 패널에서 네트워크 스로틀링 설정

위치정보 재정의

위치정보 재정의 UI를 열려면 Customize and control DevTools DevTools 사용자설정 및 제어를 클릭하고{: .inline-icon } More tools > Sensors를 선택합니다.

Sensors
그림 17. Sensors

또는 Cmmd+Shift+P(Mac)를 누르거나 Ctrl+Shift+P(Windows, Linux, Chrome OS)를 눌러 Command Menu를 열고, Sensors를 입력한 다음 Show Sensors를 선택합니다.

Show Sensors
그림 18. Show Sensors

Geolocation 목록의 프리셋 중 하나를 선택하거나 Custom location을 선택하여 자신의 좌표를 입력하고, 또는 Location unavailable을 선택하여 위치정보가 오류 상태일 때 어떻게 행동하는지 테스트할 수 있습니다.

위치정보
그림 19. 위치정보

방향 설정

방향 UI를 열려면 Customize and control DevTools DevTools 사용자설정 및 제어를 클릭하고{: .inline-icon } More tools > Sensors를 선택합니다.

Sensors
그림 20. Sensors

또는 Cmmd+Shift+P(Mac)를 누르거나 Ctrl+Shift+P(Windows, Linux, Chrome OS)를 눌러 Command Menu를 열고, Sensors를 입력한 다음 Show Sensors를 선택합니다.

Show Sensors
그림 21. Show Sensors

Orientation 목록의 프리셋 중 하나를 선택하거나 Custom orientation을 선택하여 알파, 베타, 감마값을 직접 입력합니다.

방향
그림 22. 방향

의견

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

의견을 남기는 다른 방법은 DevTools 커뮤니티 가입하기를 참조하세요.