Симулятор мобильного браузера: Эмуляция мобильных и планшетных устройств в Chrome

Chrome эмуляция мобильных устройств

Для ПК существует несколько интересных программ, эмулирующих среду Android. С их помощью получится запускать мобильные приложения непосредственно в Windows. Но также имеется специальное расширение для Хрома. Именно о нем хотелось бы поговорить в этом материале. Разберемся, как установить эмулятор Андроид в браузере Google Chrome и как им пользоваться.

Руководство

Начнем с самого простого и незамысловатого – установки расширения. Да-да, эмулятор действительно существует и, дабы в этом убедиться, предлагаем изучить следующую пошаговую инструкцию:

Теперь на панели инструментов (напротив адресной строки в правой части пользовательского окна) появляется новое лого. Ну что же, приступаем к осмотру графической оболочки.

Использование

Для активации дополнения достаточно кликнуть по ярлыку левой кнопкой мыши. Перед нами появляется выпадающий список, состоящий из трех разделов:

• Запустить Android-эмулятор – активация встроенного функционала и переход на официальный сайт.
• My Apk Manager & Apk Upload – возможность загружать и устанавливать приложения для Андроид через APK-файлы.
• Set userID – это нужно для регистрации и авторизации на сайте разработчиков (после ввода ника нас автоматически перебрасывает на оф. площадку).

Итак, с вопросами графической оболочки разобрались. Давайте перейдем к практическому использованию. Запустить виртуальное устройство можно, если нажать на первый пункт.Запуск приложений через APK-файл

Для претворения задуманного в жизнь достаточно выполнить несколько шагов инструкции, представленной ниже:

1. Открываем системное меню расширения.
2. Кликаем ЛКМ по вкладке My Apk Manager & Apk Upload.

   Читайте также:  Как настроить стрим на твиче через obs

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

К счастью, в 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 :

Раздел « Устройство » ( 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 » , подготовленной дружной командой проекта Интернет-технологии.ру

По данным статистического сервиса StatCounter , мобильные браузеры на фоне всех браузеров, установленных на различных типах устройств – на ПК, ноутбуках, планшетах, смартфонах и т.п. – заняли второе почётное место с долей рынка в 15,8%. Первенство в этом списке долгое время удерживает десктопный браузер

Опередили они и веб-обозреватели, установленные на планшетах. StatCounter отдельно подсчитывает визиты пользователей с мобильных устройств

Актуальность мобильных устройств со временем будет только расти, мобильный Интернет – только развиваться. Эти факты очевидны. И адаптация сайтов под мобильные устройства – давно уже не полезный совет их владельцам, а факт Must Have. При создании сайта или блога необходимо подбирать адаптивный веб-дизайн, чтобы содержимое ресурса удачно смотрелось на экране любого устройства. Но заботиться о корректности интерфейса в mobile-версии нужно не только веб-дизайнерам, владельцам сайтов или блоггерам. В процессе раскрутки YouTube

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

1. Режим разработчика в Google Chrome

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

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

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

2. Расширение для Chrome Mobile Browser Emulator

Другой способ посмотреть, насколько читабельно смотрится сайт на различных экранах – использование Chrome-расширения Mobile Browser Emulator. Оно встраивается на панель инструментов браузера и являет собой небольшое окошко с настройками запуска страницы в формате, адаптированном под разные разрешения и диагонали экрана. Первым делом необходимо указать расширению реальную диагональ экрана – диагональ используемого монитора или ноутбука, чтобы отображение веб-контента адаптировалось максимально корректно. В строке «monitor size» прописываем диагональ и жмём кнопку рядом «set».

Теперь можно приступать к тестированию. Чтобы проверить юзабилити сайта на планшетах, кликаем графу «Tablet» и последовательно применяем различные пресеты: в графе «real screen size» указываем размер экрана планшета, затем чуть выше выбираем одно из двух типичных для этих устройств разрешений.

В графе «Phones» представлены три типа стандартных разрешений экранов смартфонов и телефонов.

После выбора настроек тестируемый сайт откроется в отдельном окошке и будет выглядеть так, как выглядел бы в окне выбранного устройства, в частности, в mobile-версии на маленьких экранах.

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

Расширение не эмулирует сенсорное управление, пролистывать сайты в окошках реализуемого им mobile-формата можно обычным скроллингом при помощи колеса мыши.

3. Opera Mobile Classic Emulator

Специально для тестирования mobile-версий сайтов разработчик Opera Software создал эмулятор своего мобильного браузера Opera Mobile – Opera Mobile Classic Emulator. Это бесплатная программа для Windows, Mac и Linux. При её запуске необходимо выбрать предпочитаемый язык.

Затем указать параметры эмулируемого устройства – либо выбрать его из перечня слева из числа известных смартфонов и планшетов, либо оставить значение «Custom» и самостоятельно определить параметры в блоке справа. В этом блоке для устройства можно указать разрешение, DPI , тип эмулируемого управления (сенсорный, с помощью клавиатуры или мыши) , масштаб и пр. По итогу жмём «Запустить».

И далее в отдельном окошке можем тестировать тот или иной сайт. Программа полностью эмулирует браузер Opera Mobile с его интерфейсом и функционалом.

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

Как использовать эмулятор мобильного браузера в Chrome, Firefox, Edge и Opera —

Вам нужен доступ к эмулятору браузера смартфона на вашем ПК, чтобы протестировать мобильную версию интересующего вас веб-сайта? Может быть, вы веб-разработчик или хотите им стать, и вам нужно смоделировать мобильный браузер для проекта, над которым вы работаете. Независимо^(Regardless) от ваших причин, вот как получить доступ к эмулятору мобильного браузера в Google Chrome , Mozilla Firefox , Microsoft Edge и Opera:

Как включить и использовать эмулятор мобильного браузера в

В Google Chrome перейдите на веб-сайт, который вы хотите просмотреть в эмуляторе мобильного браузера. Затем либо нажмите CTRL + SHIFT + I на клавиатуре, либо с помощью мыши щелкните три вертикальные точки в правом верхнем углу, чтобы открыть меню «Настройка и управление Google Chrome» . ^{(“Customize and control Google Chrome”)}Выберите « Дополнительные инструменты»,^{(More tools, )} а затем « Инструменты разработчика^{(Developer Tools)} » .

Доступ к инструментам разработчика^{(Access Developer Tools)} в Google Chrome

Нажмите или коснитесь кнопки «Переключить панель инструментов устройства»^{(“Toggle device toolbar”)} (она выглядит как смартфон рядом с планшетом) или нажмите CTRL + Shift + M на клавиатуре. Это активирует панель инструментов устройства, на которой загружается мобильная страница. По умолчанию панель инструментов устройства использует адаптивный^(Responsive) шаблон для загруженного вами сайта. Нажмите^(Click) на нее и выберите мобильное устройство, которое вы хотите эмулировать. Ваши варианты включают множество iPhone, iPad, Surface Duo , два устройства Samsung Galaxy и симулятор мобильного браузера Moto G4^{(Moto G4 mobile)} для ПК.

Как включить эмулятор мобильного браузера в Google Chrome

СОВЕТ:^(TIP:) К сожалению, вы можете использовать сочетание клавиш CTRL + Shift + M только после включения инструментов разработчика.

Перейдите^(Navigate) по сайту, который хотите протестировать, переключитесь между разными смартфонами и планшетами и посмотрите, как он выглядит. Когда вы закончите, нажмите кнопку X (Закрыть)^{(X (Close))} в правом верхнем углу инструментов разработчика Google Chrome, чтобы вернуться в стандартный режим просмотра на рабочем столе.

Закрытие эмулятора мобильного браузера Google Chrome

СОВЕТ. ^(TIP:) Если вы активно пользуетесь Google Chrome^{(Google Chrome)} , вы также можете узнать , как использовать параметры управления мультимедиа в Google Chrome^{(how to use Google Chrome’s media control options)} .

Как включить и использовать эмулятор мобильного браузера в

В Mozilla Firefox откройте сайт, для которого вы хотите использовать симулятор мобильного браузера. Затем либо нажмите CTRL + Shift + M на клавиатуре, либо нажмите кнопку гамбургера в правом верхнем углу, чтобы открыть меню Firefox, и выберите « Веб-разработчик^{(Web Developer)} » .

Доступ к инструментам веб-разработчика^{(Web Developer)} в Firefox

Вы видите меню, наполненное инструментами, полезными для веб-разработчиков. В списке выберите «Responsive Design Mode», и именно этот режим просмотра веб-страницы загружается в Firefox .

Выберите режим адаптивного дизайна^{(Responsive Design Mode)} в Firefox .

Firefox включает режим адаптивного дизайна^{(Responsive Design Mode)} . В верхней части окна вы видите параметры, используемые этим режимом эмуляции. Если устройство не выбрано, щелкните или нажмите « Адаптивный^(Responsive) » , чтобы открыть раскрывающийся список с устройствами, доступными для эмуляции, а затем выберите то, которое вы хотите имитировать.

Вы можете имитировать мобильный браузер для многих iPhone, iPad, Kindle Fire ( Firefox — единственный браузер, предлагающий эту опцию эмуляции) и устройств Samsung Galaxy S9 .

Используйте эмулятор мобильного браузера в Firefox

Когда вы закончите тестирование с помощью эмулятора браузера смартфона, нажмите кнопку X (закрыть режим адаптивного дизайна)^{(X (Close Responsive Design Mode))} в правом верхнем углу Mozilla Firefox .

Закройте эмулятор мобильного браузера в Firefox .

Вы вернулись к стандартному режиму просмотра рабочего стола.

Как включить и использовать эмулятор мобильного браузера в

Microsoft Edge использует тот же механизм рендеринга, что и Google Chrome , и предлагает те же эмуляторы браузера для смартфонов. Чтобы получить к ним доступ, посетите веб-сайт, который вы хотите протестировать, и либо нажмите CTRL + SHIFT + I на клавиатуре, либо щелкните три горизонтальные точки ( «Настройки и другое»^{(“Settings and more”)} ) в правом верхнем углу Microsoft Edge . В появившемся меню перейдите в « Дополнительные инструменты^{(More tools)} », а затем в « Инструменты разработчика»^{(Developer Tools)} .

Доступ к инструментам разработчика^(Developer) в Microsoft Edge

Нажмите кнопку «Включить эмуляцию устройства»^{(“Toggle device emulation”)} (она выглядит как смартфон рядом с планшетом) или нажмите CTRL + Shift + M на клавиатуре. Это активирует панель инструментов эмулятора мобильного браузера. По умолчанию он использует адаптивный^(Responsive) шаблон для загруженного вами сайта. Нажмите^(Click) на нее и выберите мобильное устройство, которое вы хотите эмулировать. Ваши варианты включают те же смартфоны и планшеты, что и Google Chrome .

Доступ к эмулятору мобильного браузера в Microsoft Edge

Просмотрите сайт, который хотите протестировать, переключитесь между различными мобильными устройствами и посмотрите, как он выглядит. Когда вы закончите, нажмите кнопку X (Закрыть)^{(X (Close))} в правом верхнем углу Microsoft Edge.

Закройте эмулятор мобильного браузера в Microsoft Edge .

Теперь вы вернулись к стандартному режиму просмотра рабочего стола.

Как включить и использовать эмулятор мобильного браузера в

В Opera откройте веб-страницу, которую вы хотите просмотреть, как если бы вы использовали мобильное устройство. Затем щелкните значок Opera в левом верхнем углу ( «Настройка и управление Opera»^{(“Customize and control Opera”)} ). В открывшемся меню выберите « Разработчик^(Developer) », а затем « Инструменты разработчика^{(Developer tools)} » . Если вы предпочитаете клавиатуру, нажмите CTRL+Shift+I для того же результата.

Доступ к инструментам разработчика в Opera

Инструменты разработчика^{( Developer tools)} отображаются в правой части окна браузера. Нажмите кнопку «Переключить панель инструментов устройства»^{(“Toggle device toolbar”)} (она выглядит как смартфон рядом с планшетом) или нажмите CTRL + Shift + M на клавиатуре. Панель инструментов устройства показана слева. По умолчанию он использует адаптивный^(Responsive) шаблон для загруженного вами сайта. Нажмите^(Click) на нее и выберите мобильное устройство, которое вы хотите эмулировать, из списка вариантов. Opera предлагает те же эмуляторы мобильных браузеров, что и Google Chrome и Microsoft Edge , поскольку основана на том же движке рендеринга ( Chromium ).

Доступ к эмулятору мобильного браузера в Opera

Когда вы закончите тестирование, нажмите кнопку X ( Закрыть^(Close) ) в правом верхнем углу, чтобы вернуться в стандартный режим просмотра рабочего стола.

Закройте эмулятор мобильного браузера в Opera

Теперь вы знаете, как эмулировать все виды мобильных устройств в своем любимом веб-браузере. Однако вы можете заметить, что большинство веб-браузеров предлагают те же параметры эмуляции, что и iPhone и iPad. Если вы хотите подражать современному Android — смартфону или планшету, ваши шансы довольно малы, даже в Google Chrome — браузере, разработанном компанией, стоящей за Android . Если вам нужны наилучшие результаты, вам может потребоваться использовать для этой задачи два браузера: Chrome и Firefox , или Firefox и Edge , или Opera . Прежде чем уйти, расскажите нам, что вы думаете о доступных вариантах.

Related posts

• Как отключить вкладки в Chrome, Firefox, Microsoft Edge и Opera

• Как напечатать статью без рекламы во всех основных браузерах

• Как прикрепить сайт на панель задач или Start Menu в Windows 10

• Как сделать Chrome default browser в Windows 10 (Firefox & Opera)

• Как изменить default browser в Windows 11

• Как отложить вкладки в Microsoft Edge и использовать их позже

• Где печенье хранится в Windows 10 для всех основных браузеров?

• Go incognito с shortcut key в Chrome, Edge, Firefox и Opera

• Как отключить уведомления Chrome: все, что вам нужно знать

• Как установить прокси-сервер в Chrome, Firefox, Edge, и Opera

• Как изменить местоположение Microsoft Edge download

• Простые вопросы: что такое файлы cookie и что они делают?

• Как изменить язык в Firefox на Windows and Mac

• Как получить, настроить и удалить расширения Microsoft Edge

• Как удалить Microsoft Edge от Windows

• Как использовать Microsoft Edge Collections

• Как поставить Google Chrome в Dark Mode

• Как начать Microsoft Edge в Windows 10 (12 способов)

• Как экспортировать пароли LastPass в файл CSV

• Экспорт паролей из Chrome, Firefox, Opera, Microsoft Edge и Internet Explorer

Режим эмуляции мобильных устройств в Chrome – Zencoder

На сегодняшний день тестирование страниц становиться непростой задачей. Времена, когда проверка работоспособности сайта ограничивалась парой браузеров, давно прошли.

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

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

1

hover

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

Первое, что необходимо сделать, это заполучить сам браузер Chrome v.32. Если последние шесть лет вы жили на обратной стороне Луны, то тогда вы можете сделать это по ссылке google.com/chrome.

Запустите установленный Chrome, откройте в нем страницу, которую хотите протестировать и откройте Developer Tools (Menu — Tools — Developer Tools, Cmd+Opt+I

Закрываем окно Settings и открываем “Console Drawer” (это не тоже самое, что общая “Console”) — для этого кликаем мышью на иконке (расположенной слева от иконки Settings) или нажав клавишу Esc. У вас должна открыться вкладка Emulate в “Console Drawer” (если этого не произошло, перезапустите браузер Chrome):

Режим эмуляции — раздел Device

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

Выбираем из списка нужное устройство и жмем кнопочку “Emulate” внизу этого списка:

Обратите внимание! Инструкция, представленная выше, описывает включение режима эмуляции в стабильной версии v.32 браузера Chrome. Если вы используете последнюю версию браузера Chrome Canary, эта опция будет располагаться в разделе “Settings” во вкладке “General” под вкладкой “Appearance”. (прим. переводчика: кто не знает, браузер Chrome Canary — это самая свежая и нестабильная версия браузера Chrome.)

Режим эмуляции — раздел Screen

В разделе Screen можно самостоятельно установить настройки экрана эмулируемого устройства:

• Resolution — произвольный размер экрана устройства
• Device pixel ratio — то есть для дисплеев Retina от Apple нужно ставит 2, чтобы производилось удваивание размера объектов в области просмотра
• font-scaling factor (прим. переводчика: неизвестный для меня параметр)

Режим эмуляции — раздел User Agent

В этом разделе настраивается режим агента пользователя. То есть, устанавливается модель взаимодействия между эмулируемыми клиентом и сервером:

Режим эмуляции — раздел Sensors

В этом разделе настраивается режим эмуляции сенсорного экрана:

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

Эмуляция multi-touch может быть выполнена при помощи зажатой клавиши Shift и движения мыши в нужную сторону. Этот режим задействует соответствующие JavaScript-события, такие как

1

touchstart

1

touchend

1

touchmove

1

mouseover

1

mouseover

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

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

Мне больше не нужны устройства

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

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

• вы можете столкнуть с некоторыми необъяснимыми ошибками в работе эмулятора
• CSS-событие

  1

  :hover

  все еще в действии и
• для него нет механизма эмуляции; страница будет сгенерирована браузером Chrome вне зависимости от того, все ли устройства поддерживают возможности, заложенные в ней

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

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

Автор статьи: Craig Buckler, How to Use Mobile Emulation Mode in Chrome

От переводчика

Хочется от себя немного добавить в эту тему. В книге Б. Фрейна “HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств” автор приводит краткий список плагинов для тестирования страниц в различных браузерах. Эти плагины не такие “продвинутые”, как режим эмуляции в браузере Chrome. Их задача сводиться только к одному — проверке работоспособности страниц на экранах различных устройств, с разными размерами области просмотра. Цель такой проверки — создание полностью рабочего адаптивного дизайна сайта.

Для браузера Safari автор рекомендует расширение Resize или ResizeMe. Под браузер Mozilla Firefox имеется плагин Firesizer. А под браузер Google Chrome автором рекомендуется использовать расширение Windows Resizer.

Например, после установки и активизации расширения Windows Resizer под Chrome при щелчке мыши на иконке появиться окно с предустановленными размерами экранов устройств:

В дальнейших объяснениях работа с плагином не нуждается, как мне кажется.

На этом все.

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

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

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

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

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

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

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

Теперь появится имитация устройства:

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

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

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

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

Панель инструментов Mobile Emulator Device

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

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

• тип устройства (или Отзывчивый )
• текущее разрешение
• масштаб (экран можно увеличивать или уменьшать, чтобы он лучше помещался на панели эмулятора)
• скорость сети
• Кнопка переключения книжной/пейзажной ориентации

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

• рамку устройства (при наличии, изображение телефона или планшета)
• Панели медиа-запросов CSS (см. ниже)
• пиксельная линейка
• добавить соотношение пикселей устройства
• добавить типы устройств
• сделать снимок экрана (включая рамку устройства, если она показана)
• сделать снимок экрана на всю страницу

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

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

• СИНИЙ: запросы с максимальной шириной
• ЗЕЛЕНЫЙ: запросы с целевой шириной в диапазоне
• ОРАНЖЕВЫЙ: запросы, нацеленные на минимальную ширину

Щелчком по любой полосе можно установить ширину экрана эмулятора.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Запуск эмулятора мобильного браузера

 Запуск эмулятора мобильного браузера