Эмулятор мобильного браузера: расширение для Chrome или DevTools

И расширение-симулятор телефона для Chrome, и режим устройства в Chrome DevTools показывают сайт в размере телефона прямо в десктопном Chrome. Расширение быстрее для визуальных проверок: оно включается одной кнопкой и не выключается, пока вы переходите по страницам. DevTools лучше для отладки, потому что инспектор и консоль находятся рядом с превью. Ни то ни другое не заменит настоящий телефон, когда речь о касаниях или отрисовке в Safari.

Ниже разберём это подробнее, чтобы выбирать инструмент под задачу, а не по привычке.

Что значит «мобильный симулятор» в Chrome

Всё, что работает внутри десктопного Chrome, эмулирует окружение телефона, а не сам телефон. Хороший инструмент меняет сигналы, по которым сайт решает, как выглядеть:

• ширину и высоту области просмотра, от которых зависят медиазапросы CSS;
• строку user agent и client hint Sec-CH-UA-Mobile, которые читают многие серверы и скрипты;
• screen.width, screen.height и devicePixelRatio, которые читает JavaScript;
• признаки поддержки касаний, например navigator.maxTouchPoints.

Страницу при этом по-прежнему рисует движок Blink от Chrome на процессоре вашего компьютера. Поэтому слово «симулятор» здесь условное. Для сравнения, Xcode Simulator от Apple запускает настоящий Safari для iOS.

Как два подхода выглядят рядом

Картина понятна. Расширение это вид телефона, к которому больше ничего не приделано. Режим устройства это отладчик, к которому приделан вид телефона.

Когда лучше расширение

Расширение нужно, когда надо часто и быстро видеть, как выглядит мобильная версия:

• просмотреть все страницы сайта после релиза;
• показать клиенту во время созвона, как сайт выглядит на телефоне;
• проверить страницу на localhost до публикации (или на реальном телефоне, как в статье про открытие localhost на телефоне);
• сделать скриншоты в размере телефона для задачи или ревью дизайна.

Mobile View Extension — один из примеров, сделанных под это. Оно перезагружает текущую вкладку в рамке телефона или планшета, подставляет user agent, client hints, размер экрана и плотность пикселей конкретного устройства и не выключает превью при переходах. Можно повернуть экран в горизонтальную ориентацию, задать своё разрешение и сохранить PNG вида в рамке. Настройки вроде выбранного устройства запоминаются.

Когда лучше режим устройства в DevTools

Режим устройства нужен, когда надо понять, почему что-то выглядит не так. Типичные случаи:

• посмотреть, какое правило CSS побеждает на 375 px;
• прочитать ошибки консоли, которые появляются только на мобильных;
• проверить обработчик свайпа или касания с эмулированными событиями;
• замедлить CPU и увидеть, не блокирует ли скрипт первую отрисовку.

Пошаговая настройка описана в статье про эмулятор мобильных устройств в Chrome.

Ограничения любого симулятора в браузере

Стоит трезво понимать, что показывает любой инструмент внутри Chrome. В описании Mobile View Extension ограничения названы прямо, и они типичны для всей категории:

1. Превью работает во фрейме внутри десктопного Chrome, а не как нативная эмуляция устройства.
2. События касания не генерируются, вы работаете мышью.
3. Медиазапросы на плотность пикселей, pointer и hover эмулируются не полностью. Брейкпоинты по ширине следуют за областью просмотра в рамке.

У DevTools есть свои ограничения того же рода: он не покажет баги Safari, реальную нехватку памяти или экранную клавиатуру. Для этого проверяйте на настоящем iPhone или Android либо в эмуляторах Xcode и Android Studio, о которых рассказано в статьях про проверку сайта на iPhone и проверку сайта на Android.

Что проверить перед установкой расширения-симулятора

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

• Какие данные оно собирает? Прочитайте политику конфиденциальности. Инструменту для мобильного превью незачем куда-то отправлять историю браузера. В политике конфиденциальности Mobile View Extension сказано, что оно не собирает персональные данные и историю просмотров.
• Меняет ли оно user agent или только ширину? Инструменты, меняющие только ширину, равносильны изменению размера окна. Почему это не мобильная версия, объяснено в статье как открыть мобильную версию сайта на компьютере.
• Работает ли оно на localhost и на страницах за авторизацией? Многие онлайн-сервисы проверки адаптивности не умеют ни того, ни другого.
• Поддерживается ли оно? Посмотрите дату последнего обновления в Chrome Web Store.

Простой процесс с обоими инструментами

Большинство тех, кто каждый день проверяет мобильную вёрстку, в итоге делят работу: расширение для первого взгляда на каждую страницу и DevTools для страниц, где что-то не так. Для финальной проверки ключевых сценариев вроде оформления заказа или регистрации добавьте настоящий телефон. Так вы покроете внешний вид, отладку и касания, не замедляя каждую проверку.

Частые вопросы

Безопасно ли пользоваться расширением-симулятором телефона?

Зависит от расширения. Выбирайте то, у которого понятная политика конфиденциальности, нет аналитики и трекинга внутри и есть свежие обновления. Проверьте, какие разрешения оно запрашивает в Chrome Web Store.

Может ли расширение для Chrome точно эмулировать iPhone?

Нет. Оно может повторить область просмотра, user agent и плотность пикселей iPhone, но страницу рисует движок Chrome, а не Safari. Для проверок, специфичных для Safari, используйте Xcode Simulator или настоящий iPhone.

Нужен ли DevTools, если есть расширение?

Да, для отладки. Расширение покажет, что вёрстка ломается, а DevTools покажет, какое правило её ломает.