센서 패널을 사용하여 모든 기기의 센서 입력을 에뮬레이션합니다.
개요
센서 패널을 사용하면 다음 작업을 할 수 있습니다.
센서 패널 열기
운영체제에 따라 다음을 눌러 명령 메뉴를 엽니다.
- MacOS: Command+Shift+P
- Windows, Linux 또는 ChromeOS: Control+Shift+P
sensors를 입력하고 센서 표시를 선택한 다음 Enter 키를 누릅니다. DevTools 창 하단에 센서 패널이 열립니다.
위치정보 재정의
많은 웹사이트에서 사용자에게 더 관련성 높은 환경을 제공하기 위해 사용자 위치를 활용합니다. 예를 들어 사용자가 웹사이트에 위치 정보 액세스 권한을 부여하면 일기예보 웹사이트에서 사용자의 거주 지역의 현지 일기예보를 표시할 수 있습니다.
사용자의 위치에 따라 변경되는 UI를 빌드하는 경우 전 세계 여러 위치에서 사이트가 올바르게 작동하는지 확인해야 합니다.
위치정보를 재정의하려면 센서 패널을 열고 위치정보 목록에서 다음 중 하나를 선택합니다.
- 사전 설정된 도시 중 하나입니다(예: 도쿄).
- 맞춤 위치: 맞춤 경도 및 위도 좌표를 입력합니다.
- 위치를 사용할 수 없음을 선택하여 사용자의 위치를 사용할 수 없는 경우 사이트가 어떻게 동작하는지 확인합니다.
기기 방향 시뮬레이션
다양한 기기 방향을 시뮬레이션하려면 센서 패널을 열고 방향 목록에서 다음 중 하나를 선택합니다.
- 세로 역방향과 같은 사전 설정된 방향 중 하나입니다.
- 맞춤 방향: 원하는 정확한 방향을 제공합니다.
맞춤 방향을 선택하면 알파, 베타, 감마 필드가 사용 설정됩니다. 이러한 축의 작동 방식을 알아보려면 알파, 베타, 감마를 참고하세요.
방향 모델을 드래그하여 맞춤 방향을 설정할 수도 있습니다. 드래그하기 전에 Shift 키를 누른 상태에서 알파 축을 따라 회전합니다.
3D 터치
웹사이트에서 터치 이벤트를 테스트하려면 터치 스크린이 없는 기기에서 테스트하는 경우에도 클릭 대신 터치를 강제할 수 있습니다.
포인터로 터치 이벤트를 트리거하려면 다음 단계를 따르세요.
- 센서 패널을 엽니다.
- 터치 드롭다운 목록에서 포스 터치를 선택합니다.
- 상단의 메시지에서 DevTools 새로고침을 클릭합니다.
유휴 상태 감지기 상태 에뮬레이션
Idle Detection API를 사용하면 비활성 사용자를 감지하고 유휴 상태 변경에 반응할 수 있습니다. DevTools를 사용하면 실제 유휴 상태가 변경될 때까지 기다리는 대신 사용자 상태와 화면 상태 모두의 유휴 상태 변경을 에뮬레이션할 수 있습니다.
유휴 상태를 에뮬레이션하려면 다음 단계를 따르세요.
센서 패널을 엽니다. 이 튜토리얼에서는 이 데모 페이지에서 시도해 볼 수 있습니다.
Ephemeral 옆의 체크박스를 선택하고 메시지에서 데모 페이지에 유휴 감지 권한을 부여합니다. 그런 다음 페이지를 새로고침합니다.
Emulate Idle detector State(유휴 감지기 상태 에뮬레이션) 드롭다운에서 다음 중 하나를 선택합니다.
- 유휴 상태 에뮬레이션 없음
- 사용자 활성 상태, 화면 잠금 해제됨
- 사용자 활성 상태, 화면 잠김
- 사용자 유휴 상태, 화면 잠금 해제됨
- 사용자 유휴 상태, 화면 잠김
이 예에서 DevTools는 사용자 유휴 상태, 화면 잠김 상태를 에뮬레이션하며, 이 경우 데모 페이지에서 캔버스를 지우기 위한 10초 카운트다운을 시작합니다.
하드웨어 동시 실행 에뮬레이션
프로세서 코어 수가 다른 기기에서 웹사이트가 실행되는 방식을 에뮬레이션하려면 navigator.hardwareConcurrency 속성에서 보고된 값을 재정의하면 됩니다. 일부 애플리케이션에서는 이 속성을 사용하여 애플리케이션의 동시 실행 정도를 제어합니다(예: Emscripten pthread 풀 크기 제어).
하드웨어 동시 실행을 에뮬레이션하려면 다음 단계를 따르세요.
- 센서 패널을 엽니다.
- 패널 하단에서 하드웨어 동시 실행을 찾아 사용 설정합니다.
- 숫자 입력란에 에뮬레이션할 코어 수를 입력합니다.
기본값으로 되돌리려면 재설정 버튼을 클릭합니다.