Используйте панель «Датчики» для эмуляции ввода датчиков любого устройства.
Обзор
Панель «Датчики» позволяет выполнять следующие действия:
- Переопределить геолокацию .
- Имитировать ориентацию .
- Принудительное прикосновение .
- Эмулировать состояние детектора простоя .
Откройте панель «Датчики».
В зависимости от вашей операционной системы нажмите следующую кнопку, чтобы открыть командное меню:
- В MacOS: Command + Shift + P.
- В Windows, Linux или ChromeOS: Control + Shift + P.
Введите
sensors, выберите «Показать датчики» и нажмите Enter . Панель «Датчики» откроется в нижней части окна DevTools.
Переопределить геолокацию
Многие веб-сайты используют местоположение пользователя , чтобы обеспечить более релевантный опыт для своих пользователей. Например, веб-сайт погоды может показывать местный прогноз для региона пользователя, как только пользователь предоставил веб-сайту разрешение на доступ к своему местоположению.
Если вы создаете пользовательский интерфейс, который меняется в зависимости от того, где находится пользователь, вы, вероятно, захотите убедиться, что сайт работает корректно в разных местах по всему миру.
Чтобы переопределить геолокацию, откройте панель «Датчики» и в списке «Геолокация» выберите один из следующих пунктов:
- Один из предустановленных городов, например Токио .
- Пользовательское местоположение для ввода пользовательских координат долготы и широты.
- Выберите «Местоположение недоступно», чтобы увидеть, как ведет себя ваш сайт, когда местоположение пользователя недоступно.
Имитировать ориентацию устройства
Чтобы имитировать различные ориентации устройства , откройте панель «Датчики» и в списке «Ориентация» выберите один из следующих вариантов:
- Одна из предустановленных ориентаций, например «Портрет вверх ногами» .
- Пользовательская ориентация для обеспечения вашей собственной точной ориентации.
После выбора произвольной ориентации поля альфа , бета и гамма становятся активными. См. Alpha , Beta и Gamma, чтобы понять, как работают эти оси.
Вы также можете установить произвольную ориентацию, перетащив Модель ориентации . Удерживайте Shift перед перетаскиванием, чтобы повернуть вдоль оси альфа .
Принудительное прикосновение
Чтобы протестировать события касания на своем веб-сайте, вы можете принудительно касаться вместо щелчка, даже если вы тестируете на устройстве без сенсорного экрана.
Чтобы вызвать события касания с помощью указателя:
- Откройте панель «Датчики» .
- В раскрывающемся списке «Прикосновение» выберите «Принудительное касание» .
- Нажмите «Обновить DevTools» в командной строке вверху.
Эмулировать состояние детектора простоя
API обнаружения простоя позволяет обнаруживать неактивных пользователей и реагировать на изменения состояния простоя. С помощью DevTools вы можете эмулировать изменения состояния простоя как для состояния пользователя, так и для состояния экрана, вместо того, чтобы ждать изменения фактического состояния простоя.
Чтобы эмулировать состояния простоя:
Откройте панель «Датчики» . Для этого урока вы можете попробовать его на этой демонстрационной странице .
Установите флажок рядом с пунктом «Эфемерный» и в командной строке предоставьте демонстрационной странице разрешение на обнаружение простоя. Затем перезагрузите страницу.
В раскрывающемся списке «Эмулировать состояние детектора простоя» выберите один из следующих вариантов:
- Нет эмуляции простоя
- Пользователь активен, экран разблокирован
- Пользователь активен, экран заблокирован
- Пользователь неактивен, экран разблокирован
- Пользователь неактивен, экран заблокирован
В этом примере DevTools эмулирует состояние ожидания пользователя и блокировки экрана , и в этом случае демонстрационная страница запускает 10-секундный обратный отсчет для очистки холста.