센서 탭을 사용하여 모든 기기의 센서 입력을 에뮬레이션합니다.
센서 탭 열기
운영 체제에 따라 다음을 눌러 명령 메뉴를 엽니다.
- MacOS: Command+Shift+P
- Windows, Linux, ChromeOS의 경우 Control+Shift+P를 눌러
sensors를 입력하고 센서 표시를 선택한 다음 Enter를 누릅니다. DevTools 창 하단에 센서 탭이 열립니다.
위치정보 재정의
많은 웹사이트에서는 사용자에게 보다 관련성 높은 경험을 제공하기 위해 사용자 위치를 활용합니다. 예를 들어 사용자가 웹사이트에 사용자 위치 액세스 권한을 부여하면 날씨 웹사이트에서 사용자 지역의 지역 일기예보를 표시할 수 있습니다.
사용자의 위치에 따라 변경되는 UI를 빌드하는 경우 사이트가 전 세계 여러 위치에서 제대로 작동하는지 확인하는 것이 좋습니다.
위치정보를 재정의하려면 센서 탭을 열고 위치정보 목록에서 다음 중 하나를 선택합니다.
- 미리 설정된 도시 중 하나입니다(예: 도쿄).
- 맞춤 경도 및 위도 좌표를 입력할 수 있는 맞춤 위치
- 위치 사용 불가를 선택하여 사용자의 위치를 사용할 수 없을 때 사이트가 어떻게 작동하는지 확인합니다.
기기 방향 시뮬레이션
다양한 기기 방향을 시뮬레이션하려면 센서 탭을 열고 방향 목록에서 다음 중 하나를 선택합니다.
- 미리 설정된 방향 중 하나(예: 세로 방향 뒤집기)
- 맞춤 방향: 나만의 정확한 방향을 제공합니다.
커스텀 방향을 선택하면 alpha, beta, gamma 필드가 사용 설정됩니다. 이러한 축의 작동 방식을 알아보려면 알파, 베타 및 감마를 참고하세요.
방향 모델을 드래그하여 맞춤 방향을 설정할 수도 있습니다. Shift 키를 누른 상태에서 드래그하면 알파 축을 따라 회전합니다.
강제 터치
웹사이트에서 터치 이벤트를 테스트하려면 터치스크린이 없는 기기에서 테스트하는 경우에도 클릭하는 대신 강제로 터치를 할 수 있습니다.
포인터로 터치 이벤트를 실행하려면 다음 단계를 따르세요.
- 센서 탭을 엽니다.
- 터치 드롭다운 목록에서 강제 터치를 선택합니다.
- 상단의 프롬프트에서 DevTools 새로고침을 클릭합니다.
유휴 감지기 상태 에뮬레이션
유휴 감지 API를 사용하면 비활성 사용자를 감지하고 유휴 상태 변경에 대응할 수 있습니다. DevTools를 사용하면 실제 유휴 상태가 변경될 때까지 기다리는 대신 사용자 상태와 화면 상태 모두의 유휴 상태 변경을 에뮬레이션할 수 있습니다.
유휴 상태를 에뮬레이션하려면 다음 안내를 따르세요.
임시 옆의 체크박스를 선택하고 프롬프트에서 데모 페이지에 유휴 감지 권한을 부여합니다. 그런 다음 페이지를 새로고침하세요.
유휴 감지기 상태 에뮬레이션 드롭다운에서 다음 중 하나를 선택합니다.
- 유휴 상태 에뮬레이션 없음
- 사용자 활성 상태, 화면 잠금 해제됨
- 사용자 활성 상태, 화면 잠김
- 사용자 유휴 상태, 화면 잠금 해제됨
- 사용자 유휴 상태, 화면 잠김
이 예에서 DevTools는 사용자 유휴 상태, 화면 잠금 상태를 에뮬레이션하며 이 경우 데모 페이지에서 캔버스를 지우기 위해 10초 카운트다운을 시작합니다.