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

Linux loves

Чтобы эмулировать мобильные устройства в Google Chrome‚ можно использовать встроенный инструмент разработчика․ Этот инструмент позволяет проверить‚ как будет выглядеть и работать ваш веб-сайт на различных моделях мобильных устройств․ Вот пошаговая инструкция по эмуляции мобильных устройств в Google Chrome⁚

Шаг 1⁚ Откройте Google Chrome и перейдите на веб-сайт‚ который вы хотите эмулировать․

Шаг 2⁚ Нажмите правой кнопкой мыши на любом месте на странице и выберите "Исследовать элемент"․
Шаг 3⁚ Перейдите на вкладку "Toggle device toolbar" (иконка с изображением мобильного телефона и планшета)․ Вы также можете открыть эту вкладку‚ нажав комбинацию клавиш Ctrl + Shift + M;

Шаг 4⁚ На верхней панели откроется панель эмуляции мобильных устройств․ Здесь вы можете выбрать существующую модель устройства из выпадающего списка или ввести собственные параметры․

Шаг 5⁚ После выбора модели устройства вся страница будет автоматически перезагружена и отображаться в выбранном режиме эмуляции․
Шаг 6⁚ Теперь вы можете проверить‚ как ваш веб-сайт выглядит и работает на выбранном мобильном устройстве․ Вы также можете изменять размер экрана‚ ориентацию и другие настройки‚ чтобы проверить‚ как ваш сайт будет адаптироваться․

Шаг 7⁚ Когда вы закончите проверять ваш веб-сайт‚ вы можете отключить режим эмуляции‚ нажав вкладку "Toggle device toolbar" снова или закрыв вкладку инструментов разработчика․

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

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

Содержание
  1. Инструменты для разработчиков
  2. Эмуляция сенсорного взаимодействия
  3. Панель эмуляции мобильного устройства
  4. Панель медиазапросов CSS
  5. Настройки эмулируемого устройства
  6. Эмуляция с низкой пропускной способностью
  7. Эмуляция мобильного датчика
  8. Удаленная отладка реального устройства
  9. Теперь мне не нужны никакие устройства!
  10. Эмулятор мобильных устройств (Chrome DevTools)
ЧИТАТЬ ЕЩЁ:  Проверка запроса – предотвращение атак скриптов

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

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

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

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

Инструменты разработчика - 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 (если она включена). Вы также можете настроить собственную конфигурацию полосы пропускания, выбрав опцию "Настройки" в нижней части выпадающего списка.

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

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

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

            Эмуляция мобильного датчика

            Мобильные устройства оснащены такими датчиками, как GPS, гироскоп и акселерометр, которых нет у стационарных устройств. Их можно эмулировать с помощью браузера Google Chrome, выбрав "Датчики" в меню "Дополнительные инструменты":

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

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

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

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

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

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

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

              Теперь мне не нужны никакие устройства!

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

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

              Однако для быстрого тестирования мобильных устройств эмулятор Chrome позволяет значительно сэкономить время.

ЧИТАТЬ ЕЩЁ:  Карта сайта в форматах html и xml - создание и настройка

Эмулятор мобильных устройств (Chrome DevTools)

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