Как использовать режим эмуляции мобильных устройств в Chrome

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

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

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

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

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

Для начала вам нужен Chrome не ранее 32 версии. Если последние шесть лет вы жили по ту сторону Луны, то можете найти его тут: google.com/chrome.

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

Кликнете по иконке «Настройки» (Settings) в правом верхнем углу и откройте секцию «Переопределения» (Overrides), чтобы включить функцию «Показывать эмуляцию в консоли» (Show ‘Emulation’ view in console drawer):

Показывать эмуляцию в консоли

Закройте настройки и откройте Console Drawer (это не то же самое, что обычная консоль), кликнув по его иконке (слева от зубчатого значка настроек) или нажав ESC.

В Console Drawer вы увидите вкладку «Эмуляция» (Emulation) – если ее там нет, попробуйте перезапустить Chrome:

Console Drawer

Раздел «Устройство» (Device) предоставляет несколько дюжин предустановок для распространенных мобильных устройств включая iPhone, iPad, Kindle, планшеты Nexus, смартфоны Samsung Galaxy и т.д. Выбор одного из устройств определит соответствующие значения по умолчанию в панелях настроек.

Примечание: инструкции, приведенные выше, включающие режим эмуляции, соответствуют Chrome версии 32. Если вы используете более позднюю версию Chrome Canary, тогда вы можете найти эту опцию в меню «Настройки» > вкладка «Общие» > раздел «Внешний вид».

Экран

Опция «Экран» (Screen) позволяет задать:

  • разрешение устройства;
  • соотношение пикселей, например, 2 для дисплеев Apple Retina, где реальное разрешение – это удвоенное разрешение области просмотра;
  • коэффициент масштабирования шрифта.
Экран

Пользовательский агент (User Agent)

В разделе «Пользовательский агент» (User Agent) можно подделать строку пользовательского агента, тогда клиент и код серверной части будут реагировать соответствующим образом:

Пользовательский агент

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

Если у вас есть время, склонность, терпение и бюджет, чтобы создавать отдельные сайты для каждого устройства, вы можете также создать и приложения для конкретной платформы!

Сенсоры

Опция «Сенсоры» (Sensors) позволяет эмулировать аппаратные средства устройства, включая сенсорный экран, геолокацию и акселерометр:

Сенсоры

Разрешение эмуляции сенсорного экрана переключает курсор мыши на более короткую тень, размером с кончик пальца:

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

События с множественными касаниями, например, сжимание, могут быть имитированы зажатием кнопки Shift и перетаскиванием мышью.

Режим сенсорного экрана запускает соответствующие JavaScript события, такие как touchstart, touchmove и touchend.

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

Возвращение в режим браузера

Для завершения эмуляции устройства, вернитесь назад в раздел «Устройство» (Device) и нажмите кнопку «Сброс» (Reset).

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

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

Также вы должны знать, что эмулятор не совершенен:

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

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

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

Перевод статьи «How to Use Mobile Emulation Mode in Chrome» был подготовлен дружной командой проекта Сайтостроение от А до Я.

19 апреля 2014 в 11:54
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок