Эмулятор мобильных устройств в Chrome называется режимом устройства (device mode) и встроен в Chrome DevTools. Откройте DevTools, нажмите Ctrl + Shift + M в Windows и Linux или Cmd + Shift + M на Mac, выберите телефон в меню Dimensions и перезагрузите страницу. После этого Chrome отрисует её с viewport, плотностью пикселей и user agent выбранного телефона.
В этой инструкции разобраны все настройки, которые нужны для ежедневной проверки мобильной версии, а в конце перечислено то, чего режим устройства показать не может.
Как включить режим мобильного устройства в Chrome
- Откройте страницу, которую хотите проверить.
- Откройте DevTools:
F12,Ctrl + Shift + I(Windows, Linux) илиCmd + Option + I(Mac). Можно также кликнуть по странице правой кнопкой и выбрать Просмотреть код. - Нажмите значок Toggle device toolbar (телефон и планшет) в левом верхнем углу DevTools или используйте сочетание клавиш выше, пока фокус в DevTools.
- Перезагрузите страницу, чтобы сайт получил мобильный user agent уже с первым запросом.
Четвёртый шаг чаще всего пропускают. Без перезагрузки сайт, который определяет устройство на сервере, уже успел отдать вам десктопный HTML.
Выбор устройства или своего размера
У меню Dimensions над viewport два режима.
Responsive позволяет тянуть края viewport или вводить ширину и высоту вручную. Используйте его, чтобы найти точную ширину, на которой ломается вёрстка. Полоса над viewport содержит готовые ширины (Mobile S 320, Mobile M 375, Mobile L 425, Tablet 768, Laptop 1024) для быстрого переключения.
Конкретная модель, например iPhone или Pixel, задаёт сразу ширину, высоту, плотность пикселей и user agent. По умолчанию список короткий. Нажмите Edit внизу списка, чтобы включить другие устройства, или Add custom device, чтобы создать своё: с названием, шириной, высотой, плотностью пикселей и строкой user agent. Своё устройство пригодится, когда нужный телефон новее, чем список Chrome. Значения для актуальных iPhone есть в таблице разрешений экранов iPhone.
Значок поворота переключает портретную и альбомную ориентацию.
Как сымитировать медленный телефон: замедление сети и CPU
Компьютер в несколько раз быстрее обычного телефона. Режим устройства помогает сократить этот разрыв:
- В меню Throttling на панели устройств есть пресеты для средних и слабых телефонов, которые замедляют и сеть, и процессор.
- На панели Performance можно отдельно задать замедление CPU (например, в 4 или 6 раз).
- На панели Network есть пресеты сети вроде Fast 4G, Slow 4G и 3G.
Замедление — это симуляция, а не замер на реальном железе. Используйте его, чтобы увидеть явные проблемы, например скрипт, который блокирует отрисовку на две секунды. Цифры, которые можно показывать в отчёте, дают инструменты из статьи проверка скорости сайта на мобильных и аудит Lighthouse для мобильных.
Касания, датчики и другие настройки эмуляции
Когда выбрано мобильное устройство, Chrome генерирует touch-события вместо событий мыши, а курсор превращается в кружок. Так можно примерно проверить свайп-карусели и обработчики тапов, хотя мышь всё равно двигается иначе, чем палец.
Меню из трёх точек на панели устройств даёт дополнительные опции: Show media queries рисует ваши брейкпоинты цветными полосами, Show rulers добавляет пиксельные линейки, а Add device pixel ratio и Add device type выносят эти настройки на панель. Панель Sensors (откройте её через командное меню, Ctrl + Shift + P или Cmd + Shift + P) подменяет геолокацию и ориентацию устройства.
Как сделать мобильный скриншот в режиме устройства
Откройте меню из трёх точек на панели устройств и выберите Capture screenshot для видимой области или Capture full size screenshot для всей страницы. Если выбрана конкретная модель, сначала включите Show device frame, чтобы на снимке был контур телефона. Этот способ мы сравнили с другими в статье как сделать скриншот мобильной версии сайта.
Чего режим устройства не покажет
Режим устройства работает и на localhost. Как открыть тот же локальный сервер на настоящем телефоне, описано в статье как открыть localhost на телефоне.
Документация Chrome сама называет режим устройства приближением первого порядка. Ограничения вполне реальные:
| Аспект | Что делает режим устройства | Чего он не может |
|---|---|---|
| Движок рендеринга | Использует десктопный Chrome (Blink) | Показать баги Safari и iOS |
| Производительность | Имитирует медленный CPU и сеть | Воспроизвести перегрев, память и GPU реального телефона |
| Ввод | Превращает действия мыши в touch-события | Воспроизвести жесты несколькими пальцами, досягаемость большим пальцем и поведение экранной клавиатуры |
| Интерфейс браузера | Показывает область страницы | Показать настоящую адресную строку, панели и безопасные зоны iOS и Android |
Для Safari используйте Xcode Simulator или настоящий iPhone (инструкция). Для Chrome на реальном Android подключите телефон и откройте на компьютере chrome://inspect (инструкция).
Режим устройства или расширение для мобильного просмотра?
Режим устройства лучше, когда вы отлаживаете: панели Elements, Console и Network находятся рядом с превью (обзор этих панелей есть в руководстве по Chrome DevTools). Для быстрых визуальных проверок он требует слишком много действий: DevTools должен быть открыт, а эмуляция сбрасывается на каждой вкладке.
Расширение Mobile View Extension закрывает визуальную часть одним кликом и не требует DevTools. Оно применяет user agent, размер экрана и плотность пикселей устройства, показывает рамку телефона и остаётся включённым при переходах по страницам. Touch-события оно не генерирует, поэтому для проверки касаний по-прежнему нужен режим устройства. Плюсы и минусы обоих подходов разобраны в статье мобильный симулятор в виде расширения или DevTools.
Частые вопросы
Какое сочетание клавиш включает эмулятор мобильного устройства в Chrome?
Когда DevTools открыт и в фокусе, нажмите Ctrl + Shift + M в Windows и Linux или Cmd + Shift + M в macOS.
Почему в режиме устройства сайт всё равно выглядит как десктопный?
Перезагрузите страницу после выбора устройства. Некоторые сайты решают, какую версию отдать, на первом запросе, ещё до того, как был подменён user agent.
Можно ли эмулировать iPhone в Chrome?
Можно эмулировать размер экрана, плотность пикселей и user agent iPhone. Но страницу по-прежнему отрисовывает движок Chrome, а не WebKit из Safari, поэтому баги, характерные только для Safari, вы не увидите.