Датчики: эмуляция датчиков устройства.

Кейси Баски
София Емельянова
Sofia Emelianova
GitHub

Используйте панель «Датчики» для эмуляции ввода датчиков любого устройства.

Обзор

Панель «Датчики» позволяет выполнять следующие действия:

Откройте панель «Датчики».

  1. В зависимости от вашей операционной системы нажмите следующую кнопку, чтобы открыть командное меню:

    • В MacOS: Command + Shift + P.
    • В Windows, Linux или ChromeOS: Control + Shift + P.

    Использование командного меню, чтобы открыть панель «Датчики».

  2. Введите sensors , выберите «Показать датчики» и нажмите Enter . Панель «Датчики» откроется в нижней части окна DevTools.

Переопределить геолокацию

Многие веб-сайты используют местоположение пользователя , чтобы обеспечить более релевантный опыт для своих пользователей. Например, веб-сайт погоды может показывать местный прогноз для региона пользователя, как только пользователь предоставил веб-сайту разрешение на доступ к своему местоположению.

Если вы создаете пользовательский интерфейс, который меняется в зависимости от того, где находится пользователь, вы, вероятно, захотите убедиться, что сайт работает корректно в разных местах по всему миру.

Чтобы переопределить геолокацию, откройте панель «Датчики» и в списке «Геолокация» выберите один из следующих пунктов:

  • Один из предустановленных городов, например Токио .
  • Пользовательское местоположение для ввода пользовательских координат долготы и широты.
  • Выберите «Местоположение недоступно», чтобы увидеть, как ведет себя ваш сайт, когда местоположение пользователя недоступно.

Выбор «Токио» из списка «Геолокация».

Имитировать ориентацию устройства

Чтобы имитировать различные ориентации устройства , откройте панель «Датчики» и в списке «Ориентация» выберите один из следующих вариантов:

  • Одна из предустановленных ориентаций, например «Портрет вверх ногами» .
  • Пользовательская ориентация для обеспечения вашей собственной точной ориентации.

Выбор «Портрет вверх тормашками» из списка «Ориентация».

После выбора произвольной ориентации поля альфа , бета и гамма становятся активными. См. Alpha , Beta и Gamma, чтобы понять, как работают эти оси.

Вы также можете установить произвольную ориентацию, перетащив Модель ориентации . Удерживайте Shift перед перетаскиванием, чтобы повернуть вдоль оси альфа .

Модель ориентации.

Принудительное прикосновение

Чтобы протестировать события касания на своем веб-сайте, вы можете принудительно касаться вместо щелчка, даже если вы тестируете на устройстве без сенсорного экрана.

Чтобы вызвать события касания с помощью указателя:

  1. Откройте панель «Датчики» .
  2. В раскрывающемся списке «Прикосновение» выберите «Принудительное касание» . Принудительное прикосновение вместо щелчка.
  3. Нажмите «Обновить DevTools» в командной строке вверху.

Эмулировать состояние детектора простоя

API обнаружения простоя позволяет обнаруживать неактивных пользователей и реагировать на изменения состояния простоя. С помощью DevTools вы можете эмулировать изменения состояния простоя как для состояния пользователя, так и для состояния экрана, вместо того, чтобы ждать изменения фактического состояния простоя.

Чтобы эмулировать состояния простоя:

  1. Откройте панель «Датчики» . Для этого урока вы можете попробовать его на этой демонстрационной странице .

  2. Установите флажок рядом с пунктом «Эфемерный» и в командной строке предоставьте демонстрационной странице разрешение на обнаружение простоя. Затем перезагрузите страницу.

    Предоставление разрешения на обнаружение простоя на демонстрационной странице.

  3. В раскрывающемся списке «Эмулировать состояние детектора простоя» выберите один из следующих вариантов:

    • Нет эмуляции простоя
    • Пользователь активен, экран разблокирован
    • Пользователь активен, экран заблокирован
    • Пользователь неактивен, экран разблокирован
    • Пользователь неактивен, экран заблокирован

Выбор состояния ожидания и блокировки на демонстрационной странице.

В этом примере DevTools эмулирует состояние ожидания пользователя и блокировки экрана , и в этом случае демонстрационная страница запускает 10-секундный обратный отсчет для очистки холста.

Эмулировать аппаратный параллелизм

Чтобы эмулировать работу вашего веб-сайта на устройствах с разным количеством ядер процессора, вы можете переопределить значение, сообщаемое свойством navigator.hardwareConcurrency . Некоторые приложения используют это свойство для управления степенью параллелизма своего приложения, например, для управления размером пула pthread Emscripten .

Чтобы эмулировать аппаратный параллелизм:

  1. Откройте панель «Датчики» .
  2. В нижней части панели найдите и включите Hardware concurrency .
  3. В поле ввода числа введите количество ядер, которые вы хотите эмулировать.

Включен «Аппаратный параллелизм» с числом ядер, равным 10.

Чтобы вернуться к значению по умолчанию, нажмите кнопку сброс» .