Используйте режим устройства, чтобы приблизительно оценить, как ваша страница выглядит и работает на мобильном устройстве.
Обзор
Режим устройства — это набор функций в инструментах разработчика Chrome, которые помогают имитировать работу мобильных устройств. К этим функциям относятся:
- Имитация мобильного окна просмотра
- Ограничение производительности процессора
- Ограничение скорости сети
- Кроме того, в панели «Датчики» :
Ограничения
Представьте себе режим устройства как приблизительное отображение того, как ваша страница выглядит и ощущается на мобильном устройстве. В режиме устройства вы фактически не запускаете свой код на мобильном устройстве. Вы имитируете пользовательский опыт на своем ноутбуке или настольном компьютере.
Некоторые аспекты мобильных устройств DevTools никогда не смогут смоделировать. Например, архитектура мобильных процессоров сильно отличается от архитектуры процессоров ноутбуков или настольных компьютеров. В случае сомнений, лучше всего запустить страницу на мобильном устройстве. Используйте удаленную отладку , чтобы просматривать, изменять, отлаживать и профилировать код страницы с вашего ноутбука или настольного компьютера, пока она фактически работает на мобильном устройстве.
Откройте панель инструментов устройства.
Чтобы открыть панель инструментов устройства, выполните следующие действия:
- Откройте инструменты разработчика .
- Нажмите на Переключите панель инструментов устройства , расположенную на панели действий вверху.
Имитация мобильного окна просмотра
По умолчанию панель инструментов устройства открывается в видимой области с параметрами «Размеры» в режиме «Адаптивный» . С помощью раскрывающегося списка «Размеры» можно имитировать размеры конкретного мобильного устройства .
Адаптивный режим просмотра
Перетащите маркеры, чтобы изменить размер области просмотра до необходимых вам размеров. Или введите конкретные значения в поля ширины и высоты. В этом примере ширина установлена на 480 , а высота — на 415 .
В качестве альтернативы, используйте панель предустановок ширины, чтобы установить ширину одним щелчком мыши, выбрав одно из следующих значений:
| Мобильный S | Мобильный М | Мобильный Л | Планшет | Ноутбук | Ноутбук L | 4K |
|---|---|---|---|---|---|---|
| 320px | 375px | 425px | 768px | 1024px | 1440px | 2560px |
Показать запросы от СМИ
Чтобы отобразить контрольные точки медиазапросов над областью просмотра, нажмите Дополнительные параметры > Показать медиа-запросы .
Дополнительные параметры > Показать медиа-запросы . 
В инструментах разработчика теперь отображаются две дополнительные панели над областью просмотра:
- Синяя полоса с точками ограничения
max-width. - Оранжевая полоса с контрольными точками
min-width.
Нажимайте между контрольными точками, чтобы изменить ширину области просмотра и вызвать срабатывание контрольной точки.
Чтобы найти соответствующее объявление @media , щелкните правой кнопкой мыши между точками останова и выберите «Показать в исходном коде» . Инструменты разработчика откроют панель «Исходный код» на соответствующей строке в редакторе .
Установить соотношение пикселей устройства
Коэффициент пикселизации устройства (DPR) — это отношение физических пикселей на экране устройства к логическим (CSS) пикселям. Другими словами, DPR указывает Chrome, сколько пикселей экрана использовать для отрисовки пикселя CSS. Chrome использует значение DPR при отрисовке на дисплеях с высоким разрешением (HiDPI — High Dots Per Inch).
Чтобы установить значение DPR:
Нажмите «Дополнительные параметры» . > Добавить коэффициент пикселизации устройства .
На панели действий в верхней части области просмотра выберите значение DPR из нового выпадающего меню DPR .
> Добавить коэффициент пикселизации устройства . Укажите тип устройства
Используйте список «Тип устройства» , чтобы имитировать мобильное или настольное устройство.
Если вы не видите список на панели действий вверху, выберите «Дополнительные параметры». > Добавить тип устройства .
> Добавить тип устройства . В следующей таблице описаны различия между параметрами. Метод рендеринга определяет, будет ли Chrome отображать страницу в мобильной или десктопной среде. Значок курсора определяет, какой тип курсора вы видите при наведении курсора на страницу. События, которые срабатывают, определяют, генерирует ли страница события touch или click при взаимодействии со страницей.
| Вариант | Метод рендеринга | Значок курсора | События произошли |
|---|---|---|---|
| Мобильный | Мобильный | Круг | трогать |
| Мобильный (бесконтактный) | Мобильный | Нормальный | клик |
| Рабочий стол | Рабочий стол | Нормальный | клик |
| Рабочий стол (сенсорный экран) | Рабочий стол | Круг | трогать |
Режим, специфичный для устройства
Чтобы смоделировать габариты конкретного мобильного устройства, выберите устройство из списка «Размеры» .
Для получения более подробной информации см. раздел «Добавление пользовательского мобильного устройства» .
Поверните область просмотра в альбомную ориентацию.
Нажмите кнопку « Поворот , чтобы повернуть область просмотра в альбомную ориентацию.
Обратите внимание, что поворот Кнопка исчезает, если панель инструментов вашего устройства узкая.
Кнопка исчезает, если панель инструментов вашего устройства узкая. 
См. также «Установка ориентации» .
Переключить режим двух экранов
Некоторые устройства, например Surface Duo, имеют два экрана и два способа их использования: с одним или обоими активными экранами.
Чтобы переключаться между режимами двух и одного экрана, щелкните значок в панели инструментов.
Установите положение устройства
Некоторые устройства, например, Asus Zenbook Fold, имеют складные экраны. Такие экраны имеют одно положение: сплошное или сложенное. Сплошное положение подразумевает «плоское» положение, а сложенное образует угол между секциями дисплея.
Чтобы задать положение устройства, выберите «Непрерывное» или «Сложенное» в соответствующем раскрывающемся меню на панели инструментов.
Показать рамку устройства
При моделировании габаритов конкретного мобильного устройства, например, Nest Hub, выберите «Дополнительные параметры». > Отобразить рамку устройства , чтобы показать физическую рамку устройства вокруг области просмотра.
> Отобразить рамку устройства , чтобы показать физическую рамку устройства вокруг области просмотра. 
В этом примере в инструментах разработчика отображается фрейм для Nest Hub.
Добавить пользовательское мобильное устройство
Чтобы добавить пользовательское устройство:
Щелкните список устройств , а затем выберите «Редактировать» .
В разделе > вкладка «Устройства» выберите устройство из списка поддерживаемых или нажмите «Добавить пользовательское устройство» , чтобы добавить собственное.
Если вы добавляете собственное устройство, введите его название, ширину и высоту, а затем нажмите «Добавить» .
Поля «Коэффициент пикселей устройства» , «Строка пользовательского агента» и «Тип устройства» являются необязательными. Поле «Тип устройства» — это список, в котором по умолчанию установлено значение «Мобильное» .
Вернувшись в область просмотра, выберите добавленное устройство из списка «Размеры» .
Показать линейки
Нажмите «Дополнительные параметры» . > Чтобы увидеть линейки, отобразите их. Единица измерения линеек — пиксели.
> Чтобы увидеть линейки, отобразите их. Единица измерения линеек — пиксели. 
В инструментах разработчика линейки отображаются вверху и слева от области просмотра.
Щёлкните по линейкам в отмеченных местах, чтобы задать ширину и высоту области просмотра.
Увеличьте масштаб области просмотра
Используйте список «Масштабирование» , чтобы увеличить или уменьшить масштаб.
Сделайте снимок экрана
Чтобы сделать снимок экрана того, что вы видите в окне просмотра, нажмите Дополнительные параметры > Сделать снимок экрана .
Дополнительные параметры > Сделать снимок экрана . 
Чтобы сделать снимок экрана всей страницы, включая содержимое, не видимое в области просмотра, выберите пункт «Сделать снимок экрана в полном размере» в том же меню.
Чтобы включить рамку устройства при создании снимка экрана в режиме «Для конкретного устройства» , сначала выберите «Показать рамку устройства» , а затем нажмите «Сделать снимок экрана», как было указано ранее.
Чтобы узнать о других способах создания скриншотов с помощью DevTools, см. 4 способа создания скриншотов с помощью DevTools .
Ограничьте скорость сети и процессора.
Чтобы ограничить как сетевое соединение, так и загрузку процессора, выберите «Мобильные устройства среднего уровня» или «Мобильные устройства низкого уровня» в списке «Ограничение» .
В мобильных устройствах среднего уровня имитируется быстрая сеть 3G, и производительность процессора снижается в 4 раза по сравнению с обычной. В мобильных устройствах низкого уровня имитируется медленная сеть 3G, и производительность процессора снижается в 6 раз по сравнению с обычной. Имейте в виду, что снижение производительности зависит от обычных возможностей вашего ноутбука или настольного компьютера.
Обратите внимание, что список «Дроссель» будет скрыт, если панель инструментов вашего устройства узкая.
Ограничивать производительность только процессора.
Чтобы ограничить нагрузку только на процессор, но не на сеть, перейдите в панель «Производительность» и нажмите «Настройки захвата». 
Затем выберите из списка параметров процессора 4-кратное замедление , 6-кратное замедление или 20-кратное замедление .
Ограничивайте скорость сети только
Чтобы ограничить скорость сети, не влияя на загрузку процессора, перейдите в панель «Сеть» и выберите «Быстрый 3G» или «Медленный 3G» в списке «Ограничение скорости» .
Или нажмите Command+Shift+P (Mac) или Control+Shift+P (Windows, Linux, ChromeOS), чтобы открыть меню Command, введите 3G и выберите «Включить быстрое регулирование 3G» или «Включить медленное регулирование 3G» .
Также можно настроить ограничение скорости сети на панели «Производительность» . Нажмите «Настройки захвата». Затем выберите «Быстрая 3G» или «Медленная 3G» из списка сетей .
Затем выберите «Быстрая 3G» или «Медленная 3G» из списка сетей . 
Эмуляция датчиков
Используйте панель «Датчики» , чтобы изменить геолокацию, имитировать ориентацию устройства, принудительно включить сенсорное управление и эмулировать состояние ожидания.
В следующих разделах представлен краткий обзор того, как изменить геолокацию и установить ориентацию устройства. Полный список функций см. в разделе «Эмуляция датчиков устройства» .
Изменить геолокацию
Чтобы открыть интерфейс настройки геолокации, нажмите «Настроить и управлять инструментами разработчика». а затем выберите Дополнительные инструменты > Датчики .
а затем выберите Дополнительные инструменты > Датчики . 
Или нажмите Command+Shift+P (Mac) или Control+Shift+P (Windows, Linux, ChromeOS), чтобы открыть командное меню, введите Sensors , а затем выберите Show Sensors .
Выберите один из предустановленных вариантов в списке «Местоположение» , или выберите «Другое...» , чтобы ввести собственные координаты, или выберите «Местоположение недоступно», чтобы проверить, как работает ваша страница при ошибке геолокации.
Установить ориентацию
Чтобы открыть интерфейс настройки ориентации экрана, нажмите «Настроить и управлять инструментами разработчика». а затем выберите Дополнительные инструменты > Датчики .
а затем выберите Дополнительные инструменты > Датчики . 
Или нажмите Command+Shift+P (Mac) или Control+Shift+P (Windows, Linux, ChromeOS), чтобы открыть командное меню, введите Sensors , а затем выберите Show Sensors .
Выберите один из предустановленных вариантов в списке «Ориентация» или выберите «Пользовательская ориентация» , чтобы задать собственные значения альфа-, бета- и гамма-каналов.
