Эмулятор Android в браузере и на ПК: как проверить сайт на Android

Как проверить сайт в Chrome на Android прямо с компьютера: мобильный вид в Chrome, эмулятор Android Studio и удалённая отладка реального телефона.

Чтобы проверить сайт на Android с компьютера, начните с вида в размере Android-телефона в десктопном Chrome, а затем подтвердите результат в эмуляторе Android Studio или на реальном телефоне с отладкой по USB. Десктопный Chrome гораздо ближе к Android, чем к iPhone, потому что Chrome на Android работает на том же движке Blink. Эмулятор и реальный телефон добавляют то, чего нет в десктопном Chrome: настоящий интерфейс браузера, клавиатуру и мобильное железо.

Почему Android проще воспроизвести, чем iPhone

На iPhone браузерный движок почти всегда WebKit, а десктопный Chrome его не использует. На Android основной браузер у большинства людей — Chrome, построенный на том же движке, что и десктопный. Поэтому, когда вы эмулируете Android-телефон в десктопном Chrome, поведение CSS и JavaScript обычно совпадает, а разница сводится к размеру экрана, вводу, производительности и интерфейсу браузера.

Подвох в разнообразии. Android-телефоны бывают самой разной ширины (обычно от 360 до 412 CSS-пикселей в портретной ориентации), с разной плотностью пикселей и разными браузерами. У Samsung Internet, предустановленного на телефонах Samsung, свой график релизов и свои настройки, например принудительная тёмная тема, которая может изменить вид сайта.

Шаг 1: вид в размере Android-телефона в Chrome

Для проверки вёрстки подойдёт любой из двух инструментов:

Режим устройства в DevTools. Откройте DevTools, нажмите Ctrl + Shift + M (Cmd + Shift + M на Mac), выберите пресет Pixel или Galaxy и перезагрузите страницу. Режим устройства эмулирует события касания и позволяет замедлить CPU и сеть. Все шаги в статье про эмулятор мобильных устройств в Chrome.
Расширение для мобильного просмотра. В Mobile View Extension есть пресеты Android: оно перезагружает текущую вкладку с подходящим user agent, размером экрана и плотностью пикселей, без открытия DevTools. Удобно, когда нужно быстро пройтись по множеству страниц.

Проверяйте как минимум ширину 360 и 412 px, плюс горизонтальную ориентацию.

Шаг 2: эмулятор Android Studio

Android Studio — бесплатная среда разработки от Google для Android, доступная для Windows, macOS и Linux. В неё входит эмулятор, который запускает полноценный образ системы Android.

Установите Android Studio и откройте Device Manager.
Создайте виртуальное устройство. Выберите профиль телефона и образ системы с Google Play, чтобы Chrome был предустановлен.
Запустите устройство, откройте Chrome и введите адрес сайта.

Чтобы из эмулятора открыть dev-сервер на компьютере, используйте специальный адрес 10.0.2.2 вместо localhost. Например, http://10.0.2.2:5173 ведёт на сервер на порту 5173 вашего компьютера. Чтобы эмулятор работал с приемлемой скоростью, в BIOS или настройках системы должна быть включена аппаратная виртуализация.

Шаг 3: реальный Android-телефон с удалённой отладкой

Реальный телефон показывает настоящую производительность и поведение касаний, а Chrome позволяет инспектировать его с компьютера:

На телефоне откройте Настройки > О телефоне и семь раз нажмите на Номер сборки, чтобы включить режим разработчика.
В разделе Для разработчиков включите Отладку по USB.
Подключите телефон по USB и подтвердите запрос на отладку на телефоне.
На компьютере откройте Chrome и перейдите на chrome://inspect/#devices.
Откройте сайт в Chrome на телефоне, затем нажмите inspect рядом с ним на компьютере.

Вы получаете полноценный DevTools для страницы, открытой на телефоне, включая живую трансляцию экрана. На той же странице есть Port forwarding: он связывает порт на телефоне с компьютером, так что localhost:3000 на телефоне открывает ваш локальный сервер. Подробнее в статье как открыть localhost на телефоне.

А как же эмулятор Android в браузере?

Под запросом «эмулятор Android в браузере» обычно имеют в виду одно из двух. Одним нужен сайт, который запускает Android во вкладке браузера. Такие сервисы есть: они транслируют удалённый эмулятор или реальное устройство и обычно платные или ограничены по времени. Другим нужно, чтобы сам Chrome вёл себя как Android-телефон, а это ровно то, что делает режим устройства или расширение для мобильного просмотра.

Для проверки сайтов второго варианта почти всегда хватает для вёрстки, а остальное покрывают эмулятор Android Studio или реальный телефон. Сервисы с удалённой трансляцией полезны, когда на компьютер ничего нельзя установить.

Что проверять именно на Android

Ширину 360 и 412 px, самые распространённые размеры у телефонов среднего уровня и флагманов.
Экранную клавиатуру. Когда она открывается, видимая область уменьшается. Фиксированные футеры и кнопки чата могут закрывать поля ввода.
Системную кнопку и жест «Назад». Одностраничные приложения должны работать с историей так, чтобы «назад» делало то, чего ждёт пользователь.
Тёмную тему. Samsung Internet и экспериментальные настройки Chrome могут затемнять страницы, которые не объявляют цветовую схему.
Масштабирование шрифта. Пользователи Android часто увеличивают системный размер шрифта. Проверьте, что текст растёт, не ломая вёрстку.
Производительность на устройстве среднего уровня. Используйте замедление CPU в DevTools или реальный телефон среднего уровня: флагманы скрывают медленный JavaScript.

Полный список перед запуском в чек-листе тестирования мобильной версии сайта.

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

Насколько точна эмуляция Android в Chrome?

Для вёрстки и большей части CSS и JavaScript точна, потому что Chrome на Android использует тот же движок. Для производительности, жестов и интерфейса браузера точность ниже, поэтому важные сценарии подтверждайте на реальном телефоне.

Как открыть localhost в эмуляторе Android?

Используйте 10.0.2.2 вместо localhost, сохранив порт, например http://10.0.2.2:3000.

Нужен ли Android Studio, только чтобы проверить сайт?

Нет. Большинство проверок вёрстки работают в десктопном Chrome. Android Studio стоит ставить, когда нужен настоящий интерфейс браузера Android, поведение клавиатуры или конкретная версия Android.