Нажмите "Enter", чтобы перейти к содержанию

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

Содержание

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

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

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

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

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

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

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

Запустите установленный Chrome, откройте в нем страницу, которую хотите протестировать и откройте Developer Tools (Menu — Tools — Developer Tools, Cmd+Opt+I на Mac или F12/Ctrl+Shift+I под Windows и Linux). Кликните мышью на значке-шестеренке

Settings в правом верхнем углу окна браузера, затем откройте раздел Overrides для того, чтобы включить показ эмуляции в браузере — Show Emulation view in console drawer (в версии 33 эта возможность активирована по умолчанию):

Закрываем окно 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-события, такие как touchstart, touchend, touchmove. Также делается попытка полностью соответствовать мобильным браузерам благодаря реализации JavaScript-события

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

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

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

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

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

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

  • вы можете столкнуть с некоторыми необъяснимыми ошибками в работе эмулятора
  • CSS-событие :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 при щелчке мыши на иконке появиться окно с предустановленными размерами экранов устройств:

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

На этом все.

cssbrowseremulate

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

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

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

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

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

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

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

JavaScript. Быстрый старт

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

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

СИНИЙ: запросы, ориентированные на максимальную ширину.

ЗЕЛЕНЫЙ: запросы, ориентированные на ширину в пределах диапазона.

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

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

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

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

JavaScript. Быстрый старт

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

Узнать подробнее

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

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

имя

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

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

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

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

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

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

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

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

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

имя профиля

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

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

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

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

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

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

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

Ориентацию.

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

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

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

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

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

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

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

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

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

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

Автор: Craig Buckler

Источник: www. sitepoint.com

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

Читайте нас в Telegram, VK, Яндекс.Дзен

JavaScript. Быстрый старт

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

Узнать подробнее

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля!

Смотреть

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

Из этого туториала Вы узнаете, как использовать функцию эмуляции устройств браузера Google Chrome (Google Chrome Device Emulation). Эта функция поможет вам протестировать адаптивный дизайн вашего сайта путём имитации разных размеров и разрешений экрана.

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

Для того чтобы активировать Режим устройства

  1. Откройте ваш сайт, используя браузер Google Chrome.

  2. Нажмите на кнопку F12, для того чтобы получить доступ к Инструментам разработчика Chrome (Chrome DevTools).

  3. Включите режим устройства, нажав на значок Переключение в режим устройства

    (Toggle device mode). Когда режим устройства включен, значок становится синим (blue) и режим отображения переключается на эмуляцию устройства:

  4. Вы можете также включить/отключить (on/off) этот режим, используя сочетание клавиш:

    Ctrl+Shift+M (или Cmd+Shift+M на Mac).

Использование Эмуляции экрана:

Эмуляция экрана поможет Вам проверить адаптивность (test the responsiveness) вашего сайта. Вы найдёте множество заранее установленных режимов эмуляции.

  1. Выберите модель (Select a model) из выпадающего списка заранее установленных режимов, для того чтобы эмулировать определённое устройство:

    Каждый заранее установленный режим автоматически настраивает параметры эмуляции (такие как разрешение экрана устройства (device resolution) и Пиксельное соотношение (pixel ratio), а также включает

    эмуляцию сэнсорного экрана (touch emulation) и т. д.).

  2. Переключайтесь между книжным (portrait) и альбомным (landscape) видом, нажав значок «Изменить размеры». Выберите кнопку «Соответствовать размеру экрана», для того чтобы убедиться, что экран устройства, которое эмулируется, остается полностью видимым внутри окна браузера:

  3. Для того чтобы эмулировать пользовательский размер экрана (custom screen size), задайте разрешение экрана устройства в пикселях в полях ширина (width) и высота (height):

Для того чтобы работать с медиа-запросами:

Благодаря Режиму устройства легко исследовать действие медиа-запросов.

  1. Для того чтобы включить инструмент работы с медиа-запросами, нажмите на значок ‘Медиа-запросы’ (Media queries) в верхнем левом углу окна. Инструменты разработчика

    (DevTools) найдут медиа-запросы в вашем файле стилей и отобразят их как цветные полосы в верхней части окна:

  2. Медиа-запросам соответствуют такие цвета:

    Синий: Запросы для максимальной ширины экрана;

    Зелёный: Запросы для определённого диапазона значений ширины экрана;

    Оранжевый: Запросы для минимальной ширины экрана.

  3. Для того чтобы предварительно просмотреть стили для определённого разрешения экрана (preview screen styles), нажмите на панель медиа-запросов (media query bar), для того чтобы настроить разрешение окна эмулятора и предварительно просмотреть стили (preview styles) для нужного диапазона размеров экрана:

  4. Нажмите правой кнопкой мышки на панель, для того чтобы найти, в каком месте дается определение медиа-запроса (view where the media query is defined) в CSS и перейти к этому определению (jump to the definition) в исходном коде:

  5. Для того чтобы отключить (turn off) эмуляцию мобильных устройств, не покидая Режим устройства, нажмите на значок ‘Сбросить все переопределения’ (Reset all overrides) и обновите страницу:

  6. Вы можете даже изменить Операционную систему (Operation System) мобильного устройства.

    Откройте панель Инструментов разработчика, нажав на значок ‘Больше переопределений’ (More overrides) в правом верхнем углу окна браузера. Затем, выберите ‘Сеть’ (Network) в окне, которое откроется:

Мы надеемся что этот туториал был Вам полезен. Вы можете также ознакомиться с детальным видео-туториалом ниже.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • рамка устройства (если доступно, изображение телефона или планшета)
  • пиксельная линейка
  • соотношение пикселей устройства (например, 2,0 для эмулируемых экранов Retina)
  • тип устройства (категория «мобильный» или «планшет»)
  • регулирование сети (способ ограничения пропускной способности и тестирования производительности на медленных соединениях)
  • последний вариант позволяет вам сделать снимок экрана, который включает в себя рамку устройства, если показано.

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

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

  • СИНИЙ — запросы с максимальной шириной
  • ЗЕЛЕНЫЙ — запросы, которые нацелены на ширину в диапазоне
  • ORANGE — запросы с минимальной шириной

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Профили мобильных браузеров — Multilogin Knowledge Base

Обновлено 3 days ago от Igor Vilinchuk

Профили мобильных браузеров доступны начиная с версии 4.x и выше.

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

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

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

  • Разрешение экрана
  • User-agent и платформу
  • Шрифты
  • Параметры WebGL 
  • Максимальное количество точек касания

Чтобы создать браузерный профиль, следуйте инструкции ниже: 

  1. Нажмите на «Новый», в левой навигационной панели 
  2. Введите название браузерного профиля
  3. Выберите Android в качестве операционной системы
  4. Нажмите на «Изменить настойки прокси» для добавления прокси 
  5. Наш компоновщик отпечатков сам выберет настройки приватности, а также статистически верные отпечатки автоматически и профиль готов к работе. Однако, вы можете дополнительно изменить некоторые настройки, если в этом есть необходимость.
    1. Вы можете изменять настройки связанные с IP-адресом (Часовой пояс, WebRTC и Геолокация) после настройки прокси
    2. При нажатии на «Расширенные настройки» в левой панели, откроется возможность управлять каждым параметром по отдельности
  6. После нажатия «Создать профиль» новый профиль будет создан и доступен в списке профилей.

Что такое эмулятор смартфона?

Эмулятор смартфона — это инструмент, используемый на полноразмерном компьютере для имитации поведения мобильного телефона. Его основная цель — тестирование веб-сайтов на предмет их совместимости с доступом мобильных устройств к Интернету. Его также можно использовать для тестирования мобильных приложений.

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

Эмулятор смартфона также можно использовать, чтобы показать, как отображаются стандартные веб-страницы в операционных системах, используемых более продвинутыми устройствами. К ним относятся операционная система iPhone, Windows® Mobile, Google Android ™, Palm OS® и Symbian. Некоторые эмуляторы также отображают, как будет выглядеть страница в специальных мобильных версиях браузеров, таких как Microsoft Internet Explorer®, Mozilla Firefox, Apple Safari и Opera.

Существует множество различий в способах отображения веб-страниц на мобильных устройствах по сравнению с полноразмерными компьютерами. Например, размер страниц может автоматически изменяться, чтобы соответствовать меньшим экранам. Если разработчики не допускают этого, некоторые из их навигационных решений, такие как боковые панели и меню, могут оказаться не такими эффективными, как предполагалось. Есть также некоторые проблемы с мультимедийным контентом, таким как видеосистема Flash®, используемая для сайтов, таких как YouTube, или в онлайн-рекламе.

Другое использование эмулятора смартфона — для тестирования приложений. Это автономные программы, разработанные для работы на мобильных телефонах, которые обычно распространяются через такие службы, как магазин приложений iPhone, магазин приложений Android ™ и Windows® Marketplace для мобильных устройств. Эмулятор, как правило, будет доступен как часть набора инструментов для разработки программного обеспечения, пакета бесплатных инструментов, которые компания, выпускающая мобильную операционную систему, делает доступными для обеспечения правильной работы приложений на соответствующих телефонах.

Фраза «эмулятор смартфона» может также относиться к приложениям для смартфонов, которые эмулируют конкретный компьютер или, чаще всего, игровую приставку, обычно с 1980-х или 1990-х годов. Затем эти приложения запускают специальные файлы, которые имитируют оригинальные игры с этой машины. Они могут работать особенно хорошо, поскольку современные смартфоны часто имеют вычислительную мощность, равную или большую, чем у исходного компьютера или консоли. Маленький экран на смартфонах означает, что эмуляция, вероятно, лучше всего подходит для игр, которые изначально были на портативных консолях, таких как Nintendo® Gameboy. Важно отметить, что использование таких файлов может потенциально нарушать авторские права, хотя некоторые пользователи считают, что это морально приемлемо, если игры больше не являются коммерчески доступными.

ДРУГИЕ ЯЗЫКИ

Проверка мобильной версии сайта — онлайн сервис GoToMobi.Ru

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

Если же необходимо проверить мобильную версию сайта онлайн на компьютере, то на помощь приходят эмуляторы мобильных устройств. Самые точные из них — это средства для разработчиков мобильных операционных систем, самыми популярными из которых являются Android Studio и Apple Xcode. В этих наборах есть самые полные эмуляторы различных устройств и проверка мобильной версии сайта будет наиболее точно приближена к реальному мобильному устройству. Однако, чтобы установить средства для разработчиков на обычный компьютер, потребуется очень много времени, опыта и знаний по владению программным обеспечением.

Простые способы проверки мобильной версии сайта

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

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

Вторым по сложности вариантом, позволяющим проверить мобильную версию сайта через компьютер, является установка специального браузера. Например, Opera Mobile Classic Emulator. Его версии существуют для Windows, Mac и Linux. К сожалению, эта разработка основана на старом движке Presto, использованном до 12 версии браузера Opera, и не покажет реально, как отображается сайт в современном мобильном браузере. C 2013 года браузер Opera работает на программном движке Blink, поэтому проверку мобильного сайта лучше провести на современном браузере. Это может быть как Opera так и Chrome, работающие на одинаковом движке Blink на основе WebKit, используемого в Apple Safari.

Необходимо включить в указанных браузерах специальный режим разработчика (F12 в Chrome или Ctrl+Shift+i в Opera) и переключиться в режим мобильного устройства:

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

Если визуальной личной оценки для проверки мобильного сайта вам недостаточно, то существуют специальные программы, которые могут проанализировать сайт с точки зрения мобильного устройства и выдать не только количественную оценку мобильности сайта, но и дать рекомендации по улучшению видимости сайта на смартфонах. На нашем сайте как раз находится такой сервис, основанный на технологии Google Mobile Friendly. Вам достаточно только вбить адрес своего сайта в специальную строку и нажать кнопку «Проверить». Робот перейдет по указанному адресу, сделает снимок страницы в формате мобильного устройства и даст заключение о качестве вашего мобильного сайта.
Например, такое:

Проверить сайт на мобильных устройствах? онлайн-проверка

Поделиться ссылкой на наш сервис: 

Mobile simulator — инструмент тестирования отзывчивости

Симулятор смартфона и планшета на компьютере с несколькими моделями для тестирования мобильных веб-сайтов.

 Симулятор смартфонов и планшетов на компьютере очень реалистичный с несколькими моделями и разрешениями для тестирования вашего мобильного сайта.

📱10 моделей Android-смартфонов:
- Samsung Galaxy S10 (разрешение CSS 360 пикселей)
- Samsung Galaxy S20 (разрешение CSS 360 пикселей)
- Huawei P30 PRO (разрешение CSS 360 пикселей)
- Google Pixel 5 (разрешение CSS 393 пикселей)
- Oneplus Nord 2 (разрешение CSS 412 пикселей)
- Samsung Galaxy Z Flip3 (разрешение CSS 360 пикселей)
- OPPO Find X3 PRO (разрешение CSS 360 пикселей)
- Samsung Galaxy S21 Ultra (разрешение CSS 360 пикселей)
- Samsung Galaxy Note20 Ultra (разрешение CSS 412 пикселей)

📱15 моделей смартфонов Apple:
- iPhone 5 (разрешение CSS 320 пикселей)
- iPhone SE (разрешение CSS 320 пикселей)
- iPhone X (разрешение CSS 375 пикселей)
- iPhone XR 2018 (разрешение CSS 414 пикселей)
- iPhone 11 (разрешение CSS 414 пикселей)
- iPhone 11 PRO (разрешение CSS 375 пикселей)
- iPhone 11 PRO MAX (разрешение CSS 414 пикселей)
- iPhone 12 Mini (разрешение CSS 360 пикселей)
- iPhone 12 (разрешение CSS 390 пикселей)
- iPhone 12 PRO (разрешение CSS 390 пикселей)
- iPhone 12 PRO MAX (разрешение CSS 428 пикселей)
- iPhone 13 Mini (разрешение CSS 375 пикселей)
- iPhone 13 (разрешение CSS 390 пикселей)
- iPhone 13 PRO (разрешение CSS 390 пикселей)
- iPhone 13 PRO MAX (разрешение CSS 428 пикселей)

💻 5 моделей планшетов:
- Samsung Galaxy Tab S7 (разрешение CSS 1280 пикселей, ландшафтный режим)
- iPad Air 4 (разрешение CSS 1180 пикселей, альбомный режим)
- iPad Air Mini (разрешение CSS 1024 пикселей, альбомный режим)
- iPad PRO 11 дюймов (разрешение CSS 1194 пикселей, альбомный режим)
- Microsoft Surface Duo (разрешение CSS 1114 пикселей, альбомный режим)

⌚️ 5 специальных устройств:
- Apple Watch Serie 6 (разрешение CSS 162 пикселя)
- Samsung Galaxy Fold 2 (разрешение CSS 884 пикселей)
- Apple Macbook Air (разрешение CSS 1280 пикселей)
- Apple Macbook PRO 16 дюймов (2021 г.) (разрешение CSS 1728 пикселей)
- Samsung Smart TV NEO 4K (разрешение CSS 1920 пикселей)

Цель этого расширения - позволить вам легко тестировать в реалистичном контексте, чтобы сохранить мышление прежде всего мобильное.🎬 Очень легко создавать скринкасты в формате GIF.

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

🌚 Доступен ночной режим (см. Скриншоты)

Как просматривать мобильную версию веб-сайта в Chrome

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

Однако разработчики должны помнить, что 56,16% всего веб-трафика приходилось на мобильные телефоны. В результате им необходимо убедиться, что веб-сайты хорошо оптимизированы для работы в мобильных браузерах. Chrome, бесспорно, является ведущим мобильным браузером с текущей рыночной долей 64,73% во всем мире. Следовательно, тестирование мобильных версий веб-сайтов в Chrome имеет решающее значение.

Цель этой статьи — объяснить, как разработчики могут открыть мобильную версию веб-сайта в браузере Chrome через компьютер.Здесь также объясняется, как можно тестировать веб-сайты на реальных мобильных устройствах в Интернете.

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

Использование имитации устройства в Chrome DevTools для Mobile View

Пользователи могут просматривать мобильную версию веб-сайта с помощью Chrome Devtools.

Ниже перечислены шаги для просмотра мобильной версии веб-сайта в Chrome:

  1. Откройте DevTools, нажав F12.
  2. Щелкните «Панель инструментов переключения устройств» .(Значок становится синим, когда режим устройства включен)
  3. Выберите устройство, которое вы хотите смоделировать, из списка устройств iOS и Android.
  4. После того, как желаемое устройство выбрано, оно отображает мобильную версию веб-сайта.

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

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

Облако реального устройства BrowserStack для тестирования в реальном времени

Идеальный способ протестировать веб-сайт — это протестировать его на реальном устройстве. Это помогает разработчикам отслеживать веб-сайты в мобильных браузерах, установленных на реальных устройствах Android и iOS. Таким образом, QA может оценить, как веб-сайт работает на нескольких мобильных устройствах и в разных браузерах в реальном мире.

Облако реальных устройств BrowserStack предоставляет для тестирования более 2000 реальных устройств и браузеров.
Некоторые из его основных моментов:

  1. Последние устройства Android от Samsung, Oneplus, Google и Motorola
  2. Последние устройства Apple, такие как iPhone X, iPhone 11 Pro
  3. Несколько версий ведущих браузеров, таких как Chrome, Firefox, Safari, Opera, установлены на реальные устройства

QA могут тестировать на любом реальном мобильном устройстве Android или iOS прямо из своего браузера. Им не нужно загружать какие-либо браузеры или эмуляторы.Чтобы открыть мобильную версию веб-сайта в Chrome, тестировщики могут просто войти в систему, выбрать комбинацию устройство-браузер-ОС и начать тестирование. Изображение ниже является точным представлением сеанса тестирования в реальном времени (тестирование браузера Chrome на Samsung S10 +) в BrowserStack.

Посмотреть мобильную версию в реальном облаке устройства бесплатно


BrowserStack также предоставляет следующие функции:
  1. Предварительный доступ к DevTools, который позволяет проверять веб-элементы на странице
  2. Тестирование географического местоположения
  3. Интеграции с популярными сообщениями об ошибках инструменты, такие как Jira, Trello и Slack.
  4. Тестирование таких функций, как сжатие для увеличения и поворот устройства.

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

Мобильные эмуляторы | 51 градус

Core Web Vitals — это набор показателей для измерение производительности и взаимодействия с пользователем в Интернете. Это оценки за конкретные аспекты веб-опыта, которые можно рассчитать по сравнению с живыми сайты, и включить советы о способах оптимизации этих оценок для улучшения ваших веб-приложений.

В настоящее время существует три Core Web Vitals:

  • Largest Contentful Paint (LCP): время до самого большого блока контента отображается на странице.
  • First Input Delay (FID): как быстро страница реагирует после первого нажатия или нажмите.
  • Cumulative Layout Shift (CLS): насколько «подскакивает» содержимое страницы вокруг «как более медленная загрузка ресурсов.

Более крупная LCP означает, что люди долго ждут появления ваших визуальных элементов на вашем сайте.Высокий CLS означает, что пользователи переходят на что-то, и он «отпрыгивает», когда ваша страница реорганизуется. А высокий FID означает, что нажатие, похоже, ничего не делает, и делает ваш сайт чувствую себя медленно.

Каждая из этих оценок измеряет то, что действительно волнует пользователей, и оценки плохие, значит и сайт тоже плохой. Именно в этом аспекте наш основатель Джеймс полностью увлечены. Простая мантра «Хороший веб-сайт имеет хорошую производительность и удобство для пользователей» привели к тому, что мы поставили перед собой задачу улучшить наш рейтинг Core Web Vitals.

Через несколько месяцев мы достигли 100 баллов PageSpeed ​​Insights как для мобильных, так и для настольных компьютеров. Нижеприведенное методы действуют как тематическое исследование — это то, что мы сделали, чтобы определить области нашего веб-сайта, которые нуждались в улучшении.

Забота о мобильном телефоне …

Во всяком случае, о мобильных зрителях нужно заботиться больше, чем о пользователях настольных компьютеров. Если аналитика вашего сайта похожа на большинство в других случаях, по крайней мере, 50% вашего использования Интернета приходится на мобильные устройства (и, возможно, довольно много намного больше).

Но Core Web Vitals — это производительность и удобство использования — на телефоне с менее мощным процессор, ограниченное время автономной работы или совсем другая компоновка. Это, конечно, означает, что вам нужно протестировать свои сайты и оцените их показатели Core Web Vital как на мобильных устройствах, так и на компьютерах. Но как можно Вы делаете это?

… в браузере

Самый простой, но и наименее точный способ — использовать инструменты в браузере.Ваш команда разработчиков почти наверняка уже этим занимается. В каждом браузере есть «мобильный режим» встроен в его DevTools (здесь Chrome DevTools в качестве примера).

Эти режимы изменяют размер экрана в соответствии с размером и формой телефона вашего выбор. Он также может притвориться мобильным телефоном, эмулируя события касания, дросселирование сети до медленного соединения и имитация мобильное окно просмотра, чтобы показать, как макет страницы будет выглядеть на меньшем экране. Хром Также в DevTools встроен Lighthouse, который будет измерять Core Web Vitals для сайта.

Это очень полезно для «быстрого просмотра» проблем и работы над проблемами компоновки, и это, безусловно, самый простой метод. Но это не настоящая проверка площадей что Core Web Vitals помогает измерить: производительность и удобство использования.

Если отсюда больше ничего не брать, возьмите это: Тестирование в браузере DevTools не является хорошим руководством по производительности или удобству использования реальных мобильных устройств.

Итак, что вы можете сделать вместо этого?

…в тренажере

На шаг ближе к реальности — использование мобильного эмулятора. Это инструменты разработчики приложений для телефонов, входящие в состав этих собственных инструментов разработки. например XCode для iOS на Mac или Android Studio для Android на большинстве платформ.

Поначалу это может быть немного неудобно, потому что требуемый разработчик инструменты могут быть довольно тяжелыми, если вы не разработчик. Но это того стоит, поскольку они запускают программное обеспечение и браузер реального телефона. (актуальный Android и актуальный Chrome для Android, или актуальный iOS и фактический Safari для iOS), и это повышает точность тестирования.Настольный Chrome и Android Chrome — это , а не , macOS Safari и iOS Safari — это одно и то же. не то же самое, а настольный Chrome , конечно, не то же самое, что и iOS Chrome, так как все браузеры iOS действительно скрыты под Safari.

Использование эмулятора мобильного телефона (например, iPhone Simulator или Android Emulator) — хороший способ проверить, насколько сайт действительно появляется на телефоне и дает некоторое представление о производительности и влияние на сеть, в большей степени, чем воображаемая версия в браузере DevTools.Но это все еще не телефон, и тестирование в эмуляторе на ноутбуке все еще не вникает в суть важных показателей — тех, которые Core Web Жизненно важные органы измеряют.

И вот здесь мы подходим к самой важной части тестирования: к реальным устройствам.

… по актуальным телефонам

Нет замены тестированию на реальных устройствах. На самом деле нет. Я знаю это раздражает, но … никто не обещал, что все будет легко. Сказав это легко проверить на одном устройстве: на том, что у вас в кармане.

Хотя вы не можете получить точную метрику для как потрясают производительность и UX, вы сразу же получите интуитивный смысл веб-сайта. Отреагировало ли нажатие на эту кнопку мгновенно или почувствовало вялый? Макет прыгал по экрану при загрузке внешних ресурсов? Ваше приложение показывало счетчик в течение одной секунды (или 21 секунды), прежде чем оно что-либо отобразило?

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

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

Но более распространенной альтернативой является лаборатория виртуальных устройств; оплаченный онлайн-сервис, который запускает ваш код на физическом устройстве, но подключен в чужой компьютер в другом месте. Вы можете думать об этом как BrowserStack, да и сами BrowserStack являются одними из основных поставщиков удаленных устройств в реальном времени в лаборатории устройств с Perfecto Мобильное существо другое.

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

К счастью, здесь встречаются две нити. Рассчитайте базовую сеть Vitals на реальном устройстве, чтобы точно оценить, как работает ваш веб-сайт. app будет работать на устройствах, которые фактически используют ваши пользователи. Конечная цель Core Web Vitals — это количественная оценка тех вещей, которые заставляют сайт чувствовать себя производительным (или неуклюжим) по сравнению с фактическим пользователи на своих реальных телефонах.

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

Измерьте, чтобы понять

Так вот и техника. Измерьте свои показатели Core Web Vitals по многим устройств. Вносите изменения, повторно измеряйте, повторяйте. Это может быть трудоемкий процесс (и однозначно стоит максимально автоматизировать) но действительно есть ничто не заменит этого.Это то, что мы сделали на 51 градусе, и если мы сможем немного поработал, это сработало: мы набрали 100 баллов на PageSpeed ​​Insights как для мобильных, так и для настольных компьютеров.

Наши показатели Core Web Vitals задокументированы 10 мая 2021 г.

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

Итак, давай, друзья мои, с ценными знаниями, чтобы улучшить свои Core Web Vitals! А если вам нужна помощь или кто-то, кто может автоматизировать часть процесса за вас, попробуйте наше обнаружение устройств.

Эта страница обновлена ​​в 2021 году. Чтобы увидеть предыдущую версию страницы, посетите Эмуляторы мобильного браузера.

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

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

# Summary

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

# Эмуляторы браузера

Эмуляторы браузера отлично подходят для тестирования отзывчивости сайта, но они не имитируют различия в API, поддержке CSS и определенных поведениях, которые вы можете увидеть в мобильном браузере. Протестируйте свой сайт в браузерах, работающих на реальных устройствах, чтобы убедиться, что все работает должным образом.

# Firefox ‘Responsive Design View

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

# Edge F12 Emulation

Для эмуляции телефонов Windows используйте встроенную эмуляцию Microsoft Edge.

Поскольку Edge не поставляется с устаревшей совместимостью, используйте эмуляцию IE 11 для моделирования того, как ваша страница будет выглядеть в старых версиях Internet Explorer.

# Эмуляторы и симуляторы устройств

Имитаторы устройств и эмуляторы имитируют не только среду браузера, но и все устройство в целом. Они полезны для тестирования вещей, требующих интеграции с ОС, например ввода форм с помощью виртуальных клавиатур.

# Android Emulator

Стандартный браузер в Android Emulator

В настоящее время нет возможности установить Chrome на эмулятор Android. Однако вы можете использовать браузер Android, оболочку содержимого Chromium и Firefox для Android, о которых мы поговорим позже в этом руководстве.Chromium Content Shell использует тот же механизм рендеринга Chrome, но не имеет каких-либо специфических для браузера функций.

Эмулятор Android поставляется с Android SDK, который необходимо загрузить отсюда. Затем следуйте инструкциям, чтобы настроить виртуальное устройство и запустить эмулятор.

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

# Chromium Content Shell на Android

Android Emulator Content Shell

Чтобы установить Chromium Content Shell для Android, оставьте свой эмулятор запущенным и выполните следующие команды в командной строке:

  git clone https: // github.com / PaulKinlan / chromium-android-installer.git 
 chmod u + x ./chromium-android-installer/\*.sh 
 ./chromium-android-installer/install-chromeandroid.sh

Теперь вы можете протестировать свой сайт с Chromium Content Shell.

# Firefox на Android

Значок Firefox на Android-эмуляторе

Подобно Chromium Content Shell, вы можете получить APK для установки Firefox на эмулятор.

Загрузите нужный файл .apk с https://ftp.mozilla.org/pub/mozilla.org / mobile / Release / latest /.

Отсюда вы можете установить файл на открытый эмулятор или подключенное устройство Android с помощью следующей команды:

  adb install & lt; path to APK & gt; /fennec-XX.X.XX.android-arm.apk

# iOS Simulator

Симулятор iOS для Mac OS X поставляется с Xcode, который можно установить из App Store.

Когда вы закончите, узнайте, как работать с симулятором, из документации Apple.

Примечание: Чтобы избежать необходимости открывать Xcode каждый раз, когда вы хотите использовать iOS Simulator, откройте его, затем щелкните правой кнопкой мыши значок iOS Simulator в доке и выберите Keep in Dock .Теперь просто щелкните этот значок, когда он вам понадобится.

# Modern.IE

Modern IE VM

Виртуальные машины Modern.IE позволяют получать доступ к различным версиям IE на вашем компьютере через VirtualBox (или VMWare). Выберите виртуальную машину на странице загрузки здесь.

# Облачные эмуляторы и симуляторы

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

  • BrowserStack (коммерческий) — самый простой в использовании для ручного тестирования. Вы выбираете операционную систему, выбираете версию своего браузера и тип устройства, выбираете URL-адрес для просмотра, и он запускает размещенную виртуальную машину, с которой вы можете взаимодействовать. Вы также можете запустить несколько эмуляторов на одном экране, что позволит вам протестировать, как ваше приложение выглядит и ощущается на нескольких устройствах одновременно.
  • SauceLabs (коммерческий) позволяет запускать модульные тесты внутри эмулятора, что может быть действительно полезно для написания сценария потока через ваш сайт и последующего просмотра видеозаписи этого на различных устройствах.Вы также можете провести ручное тестирование своего сайта.
  • Device Anywhere (коммерческое) использует не эмуляторы, а реальные устройства, которыми вы можете управлять удаленно. Это очень полезно в том случае, если вам нужно воспроизвести проблему на конкретном устройстве и вы не можете увидеть ошибку ни в одном из вариантов в предыдущих руководствах.
  • LambdaTest (коммерческий) поможет вам выполнить ручное кроссбраузерное тестирование в комбинации более 2000 браузеров и операционных систем. Пользователи смогут записывать видео со сложными ошибками и даже делиться им с помощью таких интеграций, как MS Teams, Slack и другие.Пользователи могут ускорить свое тестирование, запустив тесты параллельно.

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

Как запустить эмулятор мобильного браузера, чтобы TestArchitect мог открывать мобильные веб-приложения и взаимодействовать с ними.

Чтобы запустить эмулятор, выполните в тесте следующее:

  1. Закройте все экземпляры Google Chrome, если они запущены.

  2. Используйте встроенную настройку браузера для запуска Google Chrome, поскольку режим устройства Chrome является неотъемлемой частью DevTools.

      значение настройки
настройка использования браузера Chrome

  3. Используйте встроенное действие навигации для перехода на веб-страницу.

      расположение
перейдите по адресу https://www.google.com/

  4. Используйте команду send для встроенного действия браузера, чтобы вызвать выбранный эмулятор в режиме устройства Chrome (подробнее). Например, следующая строка JSON определяет:

    • пользовательский агент,
    • следует ли имитировать мобильное устройство,
    • ширина экрана,
    • высота экрана,
    • соотношение пикселей устройства,
    • , превышает ли доступное представление область окна браузера должна быть уменьшена до нужного размера,
    • включение эмуляции сенсорного события
      переменная окна команды
отправить команду браузеру google [{"method": "Network.setUserAgentOverride "," params ": {" userAgent ":" Mozilla / 5.0 (Linux; Android 4.4.4; Nexus 5 Build / KTU84P) AppleWebKit / 537.36 (KHTML, например Gecko) Chrome / 38.0.2125.114 Mobile Safari / 537.36 "} }, >> эмулятор
                                       {"method": "Emulation.setDeviceMetricsOverride", "params": {"mobile": true, "width": 260, "height": 640, "deviceScaleFactor": 2, "fitWindow": false}},
                                       {"method": "Emulation.setTouchEmulationEnabled", "params": {"enabled": true}}]

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

    Важно:

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

  6. Теперь вы готовы приступить к выполнению автоматизированных веб-тестов на эмуляторе.

    Ваш фрагмент теста должен выглядеть следующим образом.

      // Запустить Google Chrome
                            значение настройки
настройка использования браузера Chrome
    
// Переходим по URL-адресу в Chrome
    
                            место расположения
перейдите по https: // www.google.com/
    
// Вызов указанного эмулятора в режиме устройства Chrome
    
                            переменная команды окна
отправить команду в браузер google [{"method": "Network.setUserAgentOverride", "params": {"userAgent": "Mozilla / 5.0 (Linux; Android 4.4.4; Nexus 5 Build / KTU84P) AppleWebKit / 537.36 (KHTML, например, Gecko) Chrome / 38.0.2125.114 Mobile Safari / 537.36 "}}, >> эмулятор
                                                      {"method": "Emulation.setDeviceMetricsOverride", "params": {"mobile": true, "width": 260, "height": 640, "deviceScaleFactor": 2, "fitWindow": false}},
                                                      {"method": "Emulation.setTouchEmulationEnabled", "params": {"enabled": true}}]
    
// Обновляем страницу, чтобы эмулятор вступил в силу
    
                            окно
обновить гугл
    
//Сделай что-нибудь

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

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

    Совет:

    Вы можете проверить свою строку JSON с помощью бесплатного ресурса jsoneditoronline.org/, чтобы убедиться, что ее синтаксис и формат верны.

    Предположим, что вы хотите изменить следующее поведение:

    • Настроить сеть:

      • Агент пользователя (UA): позволяет установить конкретное переопределение строки UA с помощью метода setUserAgentOverride. Следующая строка JSON переопределяет текущий UA.

      • Регулирование сети: эмулируйте сетевое подключение, чтобы протестировать свой сайт на различных сетевых подключениях, включая Edge, 3G и даже в автономном режиме, с помощью метода emulateNetworkConditions.Следующая строка JSON определяет обычную сеть 3G, включая:

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

    • Эмуляция данных геолокации: в отличие от настольных компьютеров, мобильные устройства обычно используют оборудование GPS для определения местоположения. Вы можете моделировать координаты геолокации с помощью метода setGeolocationOverride. Следующая строка JSON включает эмуляцию геолокации, включая:

      • Широта

      • Долгота

      • Точность

    • Эмуляция акселерометра (ориентация устройства): Чтобы проверить данные акселерометра, включите эмулятор акселерометра с помощью с помощью метода setDeviceOrientationOverride.Следующая строка JSON управляет следующими параметрами ориентации:

      • Альфа: вращение вокруг оси z.

      • Бета: наклон слева направо.

      • Гамма: наклон вперед-назад.

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

    Ваш фрагмент теста должен выглядеть следующим образом.

      // Запустить Google Chrome
                            значение настройки
настройка использования браузера Chrome
    
// Переходим по URL-адресу в Chrome
    
                            место расположения
перейдите по адресу https://www.google.com/
    
// Вызов указанного эмулятора в режиме устройства Chrome
    
                            переменная команды окна
отправить команду браузеру google [{"method": "Network.setUserAgentOverride "," params ": {" userAgent ":" Mozilla / 5.0 (Linux; Android 4.4.4; Nexus 5 Build / KTU84P) AppleWebKit / 537.36 (KHTML, например Gecko) Chrome / 38.0.2125.114 Mobile Safari / 537.36 "} }, >> эмулятор
                                                      {"method": "Emulation.setDeviceMetricsOverride", "params": {"mobile": true, "width": 260, "height": 640, "deviceScaleFactor": 2, "fitWindow": false}},
                                                      {"method": "Emulation.setTouchEmulationEnabled", "params": {"enabled": true}}]
    
// Обновляем страницу, чтобы эмулятор вступил в силу
    
                            окно
обновить гугл
    
// Здесь разрабатываем веб-автоматизацию
    
// Изменение среды для настройки поведения эмулятора на лету
                                
                            переменная команды окна
отправить команду браузеру google [{"method": "Network.setUserAgentOverride "," params ": {" userAgent ":" Mozilla / 5.0 (Linux; Android 5.0; SM-G900P Build / LRX21T) AppleWebKit / 537.36 (KHTML, например Gecko) Chrome / 48.0.2564.23 Mobile Safari / 537.36 "}} , >> new_behavior
                                                      {"method": "Network.emulateNetworkConditions", "params": {"offline": false, "latency": 100, "downloadThroughput": 750, "uploadThroughput": 250}},
                                                      {"method": "Emulation.setGeolocationOverride", "params": {"latitude": 16, "longitude": 108, "precision": 1}},
                                                      {"метод": "DeviceOrientation.setDeviceOrientationOverride "," params ": {" alpha ": 32," beta ": 26," gamma ": 7}}]
    
// Обновляем страницу, чтобы убедиться, что все новое поведение вступило в силу
    
                            окно
обновить гугл

    Важно:

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

мобильных эмуляторов — когда их использовать vs.Мобильные симуляторы

Эмуляторы

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

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

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

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

Мобильные эмуляторы и настоящие мобильные устройства

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

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

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

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

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


Интеграция мобильных эмуляторов в ваше тестирование

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

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

Кодирование Дэвид Ист • 30 апреля 2014 г. • 4 минуты ПРОЧИТАТЬ

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

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

Службы

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

Вы можете…

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

Приведенные выше варианты вряд ли идеальны.Так что у тебя осталось? К счастью, Chrome приходит на помощь.

Эмуляция устройства Chrome

Начиная с Chrome 32 у нас есть возможность имитировать поведение других устройств. Это называется эмуляцией. Эмулировать устройство в Chrome очень просто. После некоторой настройки некоторых параметров в Chrome Dev Tools мы сразу же приступим к работе.

Конструктор шаблонов электронной почты в Интернете

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

Попробуйте бесплатноДругие продукты

Шаг 1. Откройте инструменты разработчика

Вы можете открыть Chrome Dev Tools, нажав F12 в Windows или Cmd + Opt + I на Mac.

Шаг 2. Откройте ящик

В правом верхнем углу есть значок для открытия «Ящика» в Dev Tools.

Шаг 3. Откройте вкладку эмуляции

После того, как ящик появится снизу, вы должны увидеть несколько вкладок для выбора. Выберите вкладку «Эмуляция».”

Шаг 4. Выберите устройство и обновите

В раскрывающемся меню мы можем выбрать из множества устройств. Для начала выберем Apple iPhone 5. После выбора нажмите кнопку «Эмулировать». Вы быстро заметите, что экран выглядит необычно и совсем не так, как от iPhone. Чтобы исправить это, обновите страницу.

Шаг 5. Погрузитесь в безупречную эмуляцию

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

Дополнительные функции

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

Мобильный таргетинг

Нередко можно увидеть функции или целые веб-сайты, предназначенные для мобильных устройств. Ниже представлено изображение Twitter на эмулированном iPhone 5. Вы можете видеть, что оно похоже на приложение Twitter, и есть даже баннер вверху для его загрузки в App Store.

Мы сами можем написать такой код. Посетите этот CodePen и измените свое устройство на iPhone, чтобы увидеть появление div.

По сути, все, что мы делаем в этом CodePen, — это спрашивает браузер, что такое User Agent. Пользовательский агент — это просто длинная и сумасшедшая строка, которая сообщает нам некоторые подробности об устройстве и браузере, которые использует пользователь.

Мы спрашиваем браузер, содержит ли пользовательский агент «iPhone» в своей строке. Если это так, то мы будем считать, что пользователь использует iPhone (даже если вы можете подделать его, как это делаем мы сейчас).

Масштабирование и масштабирование

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

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

Спуфинг геолокации

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

В разделе «Датчики» мы можем включить эмуляцию геолокационных координат. Таким образом, вместо того, чтобы браузер всегда определял, где мы находимся в данный момент, мы можем сказать ему, что на самом деле мы где-то еще. Этот CodePen использует геолокацию HTML5. Если вы измените свое местоположение в Chrome, вы увидите, что он записывает в документ другие координаты.

Анимации

Анимация — отличный способ улучшить ваш дизайн.Обратной стороной является то, что они могут быть довольно нестабильными на мобильных устройствах. Если вы заметили, что ваша анимация на мобильных устройствах отстает, вам следует подумать об их отключении для мобильных пользователей.

Published in Разное

Ваш комментарий будет первым

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

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