Ср. Дек 1st, 2021

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

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

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

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

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

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

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

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

Сейчас появится симуляция устройства:

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

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

Touch Enabled Emulation (Эмуляция с включенным сенсорным экраном)

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

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

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

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

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

Стандартные элементы управления:

тип устройства

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

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

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

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

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

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

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

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

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

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

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

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

Медиа-запросы CSS (CSS Media Query Bars)

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

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

Голубий: запросы, ориентированные на максимальную ширину.

Зеленоватый: запросы, ориентированные на ширину в границах диапазона.

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

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

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

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

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

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

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

имя

такую систематизацию, как «Мобильный» или «Планшетный».

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

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

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

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

Моделирование регулировки пропускной возможности

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

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

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

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

имя профиля

входящую скорость в килобитах в секунду

исходящую скорость в килобитах в секунду

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

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

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

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

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

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

Ориентацию.

Сенсорный отклик.

Состояние ожидания, чтоб проверить, как приложение реагирует на экран блокировки.

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

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

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

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

Супер! Мне больше не необходимы никакие устройства!

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

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

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

Создатель: Craig Buckler

Редакция: Команда webformyself.

от Admin

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *