Эмулировать датчики устройств

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

Обзор

Средство "Датчики " позволяет выполнять следующие действия:

• Переопределение геолокации
• Имитация ориентации устройства
• Имитация событий сенсорного ввода при щелчке
• Эмулировать состояние детектора простоя
• Эмулировать аппаратный параллелизм
• Эмулировать нагрузку на ЦП

Сведения о имитации окна просмотра мобильного устройства и регулировании сети и ЦП см. в статье Эмуляция мобильных устройств (эмуляция устройств).

Откройте инструмент "Датчики"

1. Откройте веб-страницу, например демонстрационную страницу приложения TODO , в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроются средства разработчика.

3. Нажмите клавишу ESC один или два раза, чтобы панель быстрого просмотра была открыта в нижней части средства разработки.

4. На панели Быстрого просмотра нажмите кнопку Дополнительные инструменты , а затем выберите Датчики.

   Средство "Датчики " откроется на панели Быстрого просмотра в нижней части devTools.

Откройте средство "Датчики" с помощью меню "Команда"

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

   • В Windows, Linux или ChromeOS — CONTROL+SHIFT+P.
   • В MacOS : COMMAND+SHIFT+P.

   

2. Введите датчики, выберите Показать датчики и нажмите клавишу ВВОД.

   Средство "Датчики " откроется в режиме быстрого просмотра в нижней части devTools.

Переопределение геолокации

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

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

Чтобы переопределить географическое положение, откройте инструмент Датчики и в списке Расположение выберите один из следующих вариантов:

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

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

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

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

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

• Одна из предустановленных ориентаций, например книжная перевернутая:

  

• Настраиваемая ориентация для предоставления собственной точной ориентации.

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

  • DeviceOrientationEvent: альфа-свойство
  • DeviceOrientationEvent: бета-свойство
  • DeviceOrientationEvent: свойство гамма

  После выбора настраиваемой ориентации можно также задать настраиваемую ориентацию, перетащив модель ориентации. Удерживайте клавишу SHIFT перед перетаскиванием, чтобы повернуться вдоль альфа-оси:

  

Имитация событий сенсорного ввода при щелчке

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

1. Откройте веб-страницу, например демонстрационную страницу приложения TODO , в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроются средства разработчика.

3. Нажмите клавишу ESC один или два раза, чтобы панель быстрого просмотра была открыта в нижней части средства разработки.

4. На панели Быстрого просмотра нажмите кнопку Дополнительные инструменты , а затем выберите Датчики.

   Средство "Датчики " откроется на панели Быстрого просмотра в нижней части devTools.

5. В средстве Датчики прокрутите вниз до раскрывающегося меню Касание , а затем выберите Принудительно включено:

   

6. Нажмите кнопку Перезагрузить средства разработки в верхней части окна DevTools.

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

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

Эмулировать состояния простоя:

1. Откройте веб-страницу, например демонстрацию обнаружения простоя, в новом окне или на вкладке.

2. Щелкните страницу правой кнопкой мыши и выберите пункт Проверить.

   Откроются средства разработчика.

3. Нажмите клавишу ESC один или два раза, чтобы открыть быстрое представление в нижней части средства разработки.

4. На панели быстрого просмотра нажмите кнопку Другие инструменты , а затем выберите Датчики.

   Средство "Датчики " откроется на панели Быстрого просмотра .

5. На демонстрационной странице нажмите кнопку Начать обнаружение состояния простоя .

   Только в первый раз открывается диалоговое окно Разрешить .

6. Нажмите кнопку Разрешить .

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

7. В devTools в средстве Датчики прокрутите вниз до раскрывающегося списка Эмуляция состояния детектора простоя и выберите параметр:

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

   На демонстрационной странице отображаются эмулированный пользователь и экранные состояния:

   

См. также:

• API обнаружения бездействия в MDN.
• Демонстрация обнаружения простоя

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

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

Эмуляция аппаратного параллелизма:

1. Откройте веб-страницу, например демонстрационную страницу приложения TODO , в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроются средства разработчика.

3. Нажмите клавишу ESC один или два раза, чтобы панель быстрого просмотра была открыта в нижней части средства разработки.

4. На панели Быстрого просмотра нажмите кнопку Дополнительные инструменты , а затем выберите Датчики.

   Средство "Датчики " откроется на панели Быстрого просмотра в нижней части devTools.

5. В средстве Датчики прокрутите вниз до флажка Аппаратный параллелизм и выберите его.

6. В поле числового ввода введите количество ядер, которые нужно эмулировать:

   

   Внимание! Превышение значения по умолчанию может снизить производительность.

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

Эмулировать нагрузку на ЦП

Нагрузка на ЦП или вычислительные ресурсы — это набор сообщаемых состояний, которые дают представление о том, сколько рабочей нагрузки выполняет вычисление системы и приближается ли она к пределу. Эта информация позволяет адаптировать приложение в режиме реального времени, например видеоконференции или видеоигры, чтобы воспользоваться всеми доступными вычислительными возможностями, сохраняя при этом скорость реагирования системы путем адаптации рабочих нагрузок в режиме реального времени.

Средство "Датчики " позволяет эмулировать состояния, которые могут быть сообщены API давления на вычисления.

Чтобы имитировать нагрузку на ЦП на веб-сайте:

1. Откройте веб-страницу, например демонстрационную страницу приложения TODO , в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроются средства разработчика.

3. Нажмите клавишу ESC один или два раза, чтобы панель быстрого просмотра была открыта в нижней части средства разработки.

4. На панели Быстрого просмотра нажмите кнопку Дополнительные инструменты , а затем выберите Датчики.

   Средство "Датчики " откроется на панели Быстрого просмотра в нижней части devTools.

5. В инструменте Датчики прокрутите вниз до раздела Загрузка ЦП и выберите одно из доступных для чтения состояний:

   • Нет переопределения
   • Номинальный
   • Ярмарка
   • Серьёзный
   • Критический

6. В верхней части devTools нажмите кнопку Перезагрузить средства разработки :

   

См. также

• Эмуляция мобильных устройств (эмуляция устройств)

MDN:

• API географического расположения
• События ориентации устройства
  • DeviceOrientationEvent: альфа-свойство
  • DeviceOrientationEvent: бета-свойство
  • DeviceOrientationEvent: свойство гамма
• Навигатор: свойство hardwareConcurrency
• API давления вычислений
  • Состояния давления в API давления вычислений.

Демос:

• Приложение TODO
• Демонстрация обнаружения простоя

Emscripten:

• Поддержка pthreads

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинал страницы находится здесь и авторАми являются Кайс Баски и Софья Емельянова.

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.