Как эмулировать мобильные устройства в Google Chrome

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

К счастью, современные браузеры предоставляют разработчика эмуляторы мобильных устройств. Один из лучших вы можете найти в Google Chrome.

Инструменты для разработчиков

Запустите Google Chrome, перейдите на веб-страницу, которую хотите протестировать, и откройте «Инструменты разработчиков»(Меню> Инструменты> Инструменты для разработчиков).
Активируйте эмулятор, кликнув по иконке"Toggle device toolbar", расположенной в левом верхнем углу:

Активируется эмуляция устройства:

Размеры эмулируемого экрана можно изменить, если в качестве типа устройства выбран параметр «Responsive».

Эмуляцию сенсорных взаимодействий

Наведите указатель мыши на эмулируемое устройство, чтобы увидеть круговой «сенсорный» курсор. Он будет реагировать на события на основе сенсорных взаимодействий, такие как touchstart, touchmove и touchhend. Специфичные для мыши события и эффекты CSS обрабатываться не будут.

Панель эмуляции мобильного устройства

Стоит потратить немного времени на ознакомление с панелью инструментов и меню эмулятора мобильных устройств:

Элементы управления:

• тип устройства ("Responsive");
• текущее разрешение;
• масштаб (экран эмулируемого устройства может быть увеличен или уменьшен);
• кнопка переключения портретной / пейзажной ориентации (если выбрано устройство, отличное от "Responsive").

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

• рамка устройства (если доступно, графика телефона или планшета);
• пиксельная линейка;
• соотношение пикселей устройства (например, 2,0 для эмулированных Retina-экранов);
• тип устройства («Смартфон» или «Планшет»);
• дросселирование сети (способ ограничить пропускную способность и протестировать производительность при более медленных соединениях);
• последняя опция позволяет сделать снимок экрана, который будет включать в себя рамку устройства, если она отображается.

Панель медиа-запросов CSS

Раздел, расположенный под панелью инструментов, отображает диапазон стандартных размеров смартфонов, планшетов и других устройств. Его можно открыть при выбранном типе устройства «Responsive»и установить нужную ширину.

Выберите пункт «Show media queries» в дополнительном меню, чтобы просмотреть графическое цветовое представление всех медиа запросов в CSS.

• Синий - запросы, которые ориентированы на максимальную ширину;
• Зеленый - запросы, которые ориентированы на ширину в пределах диапазона;
• Красный - запросы, которые нацелены на минимальную ширину.

Вы можете кликнуть по любой из этих полос, чтобы настроить экран эмулятора на эту ширину.

Параметры эмулируемого устройства

В раскрывающемся меню, расположенном слева, можно выбрать модель устройства. Предусмотрено несколько десятков пресетов популярных смартфонов и планшетов, включая iPhone, iPad, Kindles, планшеты Nexus, Samsung Galaxy и т. д.

Чтобы расширить список доступных моделей, выберите пункт «Edit» внизу раскрывающегося списка устройств. Или в меню «Settings» инструментов для разработчиков (F1) и выберите вкладку «Devices»:

Можно включать или отключать устройства или добавить новые, определяя:

• Название;
• Тип;
• User Agent;
• Разрешение экрана устройства;
• Соотношение пикселей (например, 2 для Retina экранов iPhone, на которых плотность пикселей в два раза выше, чем указано в разрешении окна браузера).

Обратите внимание, что все браузеры идентифицируют себя с помощью строки User Agent, отправляемой вместе со всеми HTTP-заголовками. Это может быть проверено на стороне клиента или на стороне сервера.

Эмуляция низкой пропускной способности сети

Дросселирование позволяет эмулировать медленные сетевые соединения, которые часто встречаются в мобильных сетях или общественных Wi-Fi. Вы можете использовать это, чтобы обеспечить быстрый отклик сайта или приложения в них.

Дросселирование доступно на вкладке «Throttling», а также в панели устройств Chrome (если она включена). Кроме этого можно настроить собственную конфигурацию пропускной способности сети, выбрав пункт «Settings» в нижней части раскрывающегося списка.

Нажмите «Add custom profile», а затем введите:

• название профиля;скорость загрузки в килобитах в секунду;
• скорость выгрузки в килобитах в секунду;
• задержка в миллисекундах (стандартная задержка при выполнении сетевого запроса).

Эмулирование мобильных датчиков

Мобильные устройства оборудованы такими датчиками, как GPS, гироскоп и акселерометр, которых нет в настольных устройствах. Их можно эмулировать с помощью Google Chrome, выбрав в меню «More tools» пункт «Sensors»:

Появится новая панель, которая позволяет определить:

• Текущую широту и долготу или выбрать из раскрывающегося списка крупный город.
• Ориентацию. Доступно сразу несколько пресетов, а также можно переместить изображение устройства, кликнув и перетащив его.

Удаленная отладка реального устройства

Google Chrome также позволяет подключить реальный гаджет на Android через USB для отладки удаленных устройств. Выберите «More tools», а затем «Remote devices». Убедитесь, что установлен флажок "Discover USB devices", затем подключите смартфон или планшет и следуйте появляющимся инструкциям.

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

Полный набор инструментов для разработчиков можно использовать, перейдя на вкладку «Application», и протестировать приложения Progressive Web Apps в автономном режиме. Обратите внимание: в отличие от реального приложения, которое требует HTTPS, Google Chrome позволяет запускать Progressive Web Apps с локального хоста по HTTP-соединению.

Мне не нужны никакие устройства сейчас!

Эмулятор Google Chrome полезен и эффективен. Но он не может полностью заменить взаимодействие с сайтом или веб-приложением на реальном устройстве.

Также необходимо понимать, что эмулятор мобильных устройств не идеален. В частности, Google Chrome показывает представление страницы на iPhone или iPad, но не учитывает особенности браузера Safari.

Тем не менее, для быстрого тестирования мобильных устройств эмулятор Chrome - отличная функция, которая сэкономит много времени.

Вадим Дворниковавтор-переводчик статьи «How to Simulate Mobile Devices with Device Mode in Chrome»