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

Linux loves

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

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

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

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

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

Эмуляция устройства активна:

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

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

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

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

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

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

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

Средства управления:

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

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

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

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

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

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

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

        Синий — запросы, направленные на достижение максимальной ширины;Зеленый — запросы, направленные на достижение ширины в пределах диапазона;Красный — запросы, направленные на достижение минимальной ширины.

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

        Настройки эмулируемого устройства

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

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

        Настройки эмулированного устройства

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

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

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

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

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

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

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

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

Оцените статью