Разработка сайтов в Авдеевке, ДНР. Как имитировать мобильные устройства с режимом устройства в Chrome

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

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

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

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

Запустите Chrome, перейдите на веб-страницу, которую вы хотите протестировать, и откройте Инструменты разработчика (Меню > Инструменты > Инструменты разработчика, Cmd+ Opt+ Iв macOS или F12/ Ctrl+ Shift+ Iв Windows и Linux).

Теперь вы можете включить эмулятор браузера, щелкнув значок панели инструментов Toggle device в левом верхнем углу:

включить мобильную эмуляцию

Появится симуляция устройства:

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

Хотя это и не совсем эмулятор iOS или Android, в качестве предустановок можно выбрать ряд мобильных устройств, работающих на обеих платформах. Размеры эмулируемого экрана можно изменить, если в качестве типа устройства выбрано Отзывчивое.

Сенсорная эмуляция

Наведите указатель мыши на устройство, чтобы увидеть круглый сенсорный курсор. Это будет реагировать на сенсорные события JavaScript, такие как touchstart, touchmoveи touchend. События, связанные с мышью, и эффекты CSS не должны возникать.

Удерживая нажатой, Shiftщелкните и переместите мышь, чтобы имитировать масштабирование щипком.

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

Стоит потратить немного времени на ознакомление с панелью инструментов и меню над эмулятором Chrome:

панель инструментов симулятора мобильного телефона

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

тип устройства (или Responsive)

текущее разрешение

масштаб (экран можно увеличивать или уменьшать, чтобы он лучше помещался на панели эмулятора)

скорость сети

кнопка переключения книжной/пейзажной ориентации

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

рамка устройства (при наличии, изображение телефона или планшета)

Панели мультимедийных запросов CSS (см. ниже)

линейка пикселей

добавить соотношение пикселей устройства

добавить типы устройств

сделать снимок экрана (включая рамку устройства, если она показана)

сделать снимок экрана на всю страницу

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

Выберите «Показать медиа-запросы» в меню с тремя точками, чтобы просмотреть графическое представление всех медиа-запросов, заданных в CSS, с цветовой кодировкой.

медиа-запросы эмулятора мобильного телефона

СИНИЙ: запросы, нацеленные на максимальную ширину

ЗЕЛЕНЫЙ: запросы, целевая ширина которых находится в диапазоне

ОРАНЖЕВЫЙ: запросы, нацеленные на минимальную ширину

Можно щелкнуть любую полосу, чтобы установить экран эмулятора на эту ширину.

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

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

Не все устройства представлены сразу. Нажмите «Изменить... «в нижней части раскрывающегося списка устройств или щелкните значок шестеренки «Настройки DevTools» и выберите вкладку «Устройства «:

параметры имитации устройства

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

имя

классификация, такая как «Мобильный» или «Планшет»

строка пользовательского агента браузера

разрешение устройства

и соотношение пикселей (например, 2 для экранов iPhone Retina, где плотность пикселей в два раза выше заявленного разрешения области просмотра)

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

Моделирование регулирования пропускной способности

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

Раскрывающийся список регулирования доступен на вкладке «Сеть «и на панели инструментов устройства Chrome. Вы можете установить собственную конфигурацию полосы пропускания, щелкнув значок шестеренки DevTools Settings и выбрав вкладку Throttling:

ограничение пропускной способности эмулятора

Нажмите «Добавить пользовательский профиль», затем введите:

имя профиля

скорость загрузки в килобитах в секунду

скорость загрузки в килобитах в секунду

задержка в миллисекундах (типичная задержка при выполнении сетевого запроса)

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

Смартфоны и планшеты часто имеют такие датчики, как GPS, гироскопы и акселерометры, которых обычно нет в настольных устройствах. Их можно эмулировать в Chrome, выбрав «Дополнительные инструменты «, затем «Датчики «в главном трехточечном меню «Инструменты разработчика»:

эмулировать датчики

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

Текущая широта и долгота или выберите крупный город из раскрывающегося списка. Вы также можете выбрать «Местоположение недоступно «, чтобы имитировать реакцию вашего приложения, когда устройство не может получить надежный сигнал GPS.

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

Сенсорная реакция.

Состояние простоя для проверки реакции приложения на экран блокировки.

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

Наконец, Google Chrome позволяет подключать реальное Android-устройство через USB для удаленной отладки устройства. Введите в адресной строке, убедитесь, что установлен флажок «Обнаружение USB-устройств «, затем подключите телефон или планшет и следуйте инструкциям.

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

Можно использовать весь спектр инструментов разработчика, включая вкладку «Приложение «для тестирования прогрессивных веб-приложений в автономном режиме. Обратите внимание, что в отличие от реального приложения, для которого требуется HTTPS, Chrome позволяет запускать PWA с локального хоста через HTTP-соединение.

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

Эмулятор мобильного браузера Chrome полезен и мощен, но он не заменит взаимодействия с вашим веб-сайтом или приложением на реальном устройстве, чтобы оценить все возможности пользователя.

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

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