0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

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

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

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

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

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

  • Экран
  • Пользовательский агент (User Agent)
  • Сенсоры
  • Возвращение в режим браузера

Для начала вам нужен 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 вы увидите вкладку « Эмуляция » ( Emulation ) – если ее там нет, попробуйте перезапустить Chrome :

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

Экран

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

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

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

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

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

Читать еще:  Как в Google Chrome включить функцию «картинка в картинке»

Сенсоры

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

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

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

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

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

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

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

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

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

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

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

Данная публикация представляет собой перевод статьи « How to Use Mobile Emulation Mode in Chrome » , подготовленной дружной командой проекта Интернет-технологии.ру

Браузер с открытым кодом

Google разработала другой, похожий браузер – Chromium. Фактически он является основой Chrome. У Chromium простой интерфейс и меньше функций, зато открытый код. Это позволяет программистам делать на основе Chromium собственные браузеры (Opera, Microsoft Edge, Яндекс.Браузер). Открытый код, в принципе, хорошо. Программистское сообщество не только может разрабатывать новые продукты с использованием проверенных технологий. Специалисты способны определить, есть ли в продукте ошибки или «закладки» – сознательно внедренные уязвимости для доступа к пользовательским данным. Подробнее об открытом коде можно прочесть в этой статье на сайте «Теплицы».

Brave – многообещающий бесплатный браузер с открытым кодом на основе Chromium. Он появился в 2016 году. Создатели Brave позиционируют свой продукт как нацеленный на обеспечение приватности. Во главе команды Brave стоит талантливый программист Брендан Эйх (Brendan Eich), создатель языка Javascript, сооснователь Moziilla. Идея Brave – эффективно избавить людей от навязчивой рекламы и постоянного сбора пользовательских данных.

Brave доступен для Windows, macOS, Linux, Android и iOS.

Стартовая страница Chrome

Если «шапка» интерфейса браузера обновилась лишь косметически, то на странице новой вкладки произошли более значимые изменения. Они вряд ли впечатлят вас, если вы уже видели экспресс-панель в Opera, табло в Яндекс.Браузер или пользовались расширениями для Chrome. Однако для самого по себе Chrome без учёта расширений, обновление принесёт хоть какой-то прогресс.

Важно: вернуть старые квадратные элементы-превью на эту страницу можно, если в chrome://flags/ сделать следующие изменения:

  1. Установить для параметра Enable using the Google local NTP значение Enabled;
  2. Установить для параметра New Tab Page Material Design UI значение Disabled;
  3. Перезапустить браузер.
Читать еще:  Bookmarks Clean Up – удаляем дубликаты закладок и битые ссылки в Google Chrome

Первая из выделенных настроек возвращает вкладки с острыми углами, две другие – прежнюю страницу «Новая вкладка» с квадратными ячейками. Вам нужно лишь задать настройкам значения как на скриншоте (Normal, Enabled, Disabled) и перезапустить браузер

В итоге у вас всё станет по-старому – квадратные превью вместо мелких круглых иконок:

Мы вернули странице «Новая вкладка» её прежний вид

Однако у нового варианта с иконками (скриншоты ниже) тоже есть свои плюсы. Давайте оценим их подробнее:

  • Сайтов на стартовой страничке до 10 вместо 8;
  • Вы сами можете указывать сайты, которые будут отображаться;
  • Подписи к сайтам теперь также можно настроить;
  • Появилась возможность выбирать фон для страницы новой вкладки.

С помощью кнопки со значком «+» отныне возможно самостоятельно добавлять нужные сайты на эту страничку. При клике по кнопке браузер позволит ввести адрес и подпись для сайта:

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

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

Также важно обратить внимание на миниатюрную кнопку в виде шестерёнки в правом нижнем углу:

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

Выбор фона для страницы новой вкладки был давно ожидаем и вот, наконец-то, Google эта сделала. Фоны разбиты на категории:

В каждой категории отдельная тематическая подборка изображений:

Пока это всего лишь обычные статичные картинки, но все равно выглядит неплохо:

Google Chrome 67: новый API и тестовый интерфейс в стиле Material Design

Google выпустила стабильную версию браузера Chrome 67. Обновление доступно на Android, Chrome OS, Linux, macOS и Windows. Среди нововведений числятся API для использования сенсоров смартфона, инструменты WebXR для создания VR-контента и новые технологии защиты.

Использование датчиков устройства

Нововведение ориентировано на мобильные устройства. API Generic Sensors соответствует стандарту W3C и предоставляет сайтам доступ к сенсорам смартфонов и планшетов. Благодаря им разработчики могут создавать интерактивные веб-приложения. Например, можно написать код для определения скорости удара руки. Другие варианты использования показаны на GitHub.

Разработчики тестируют обновленный интерфейс браузера в стиле Material Design. Чтобы активировать новый стиль, нужно перейти на страницу chrome://flags и установить опцию Refresh в пункте UI Layout for the browser’s top chrome. На macOS через контекстное меню предоставили быстрый доступ к интерфейсу выбора Emoji. Также разработчики упростили доступ к установленным дополнениям — в боковое меню раздела настройки параметров браузера добавили отдельную ссылку на список дополнений. При открытии множества вкладок браузер показывает иконки всех сайтов.

Читать еще:  Как включить визуальную группировку вкладок в Google Chrome

Повышенная безопасность

Компания продолжила распространять технологию Site Isolation. Она отделяет сайты друг от друга в разных процессах. Подобное решение усложняет использование уязвимостей Meltdown и Spectre.

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

Также компания отказалась от технологии Public Key Pinning (HPKP) для защиты сайтов путем привязки к серверам открытых ключей. Причиной стала сложность применения: малейшая ошибка могла спровоцировать недоступность сайта.

Разработчики добавили функцию записи всех сохранённых паролей в текстовый файл в формате .csv для последующего импорта в другие менеджеры паролей. Функция доступна в настройках (в меню Saved Passwords добавлен пункт Export passwords…).

В Chrome 69 разработчики намерены запретить offline-приложения для уменьшения риска взлома. Поэтому модуль AppCache для работы сервисов без интернета переместился в разряд устаревших.

Мобильные приложения

В версии для Android изменилось отображение в адресной строке длинных URL и обеспечено автоматическое скрытие типовых частей URL, таких как «https», «http» и «www». Разработчики расширили возможности версии Chrome для iOS: улучшили обработку ссылок на iTunes, а также добавили новый менеджер загрузок с поддержкой продолжения загрузки в фоне.

Кроме нововведений и исправления ошибок в новой версии были устранены 34 уязвимости. Многие из них выявились в результате автоматизированного тестирования специальными инструментами. Среди них — AddressSanitizer, MemorySanitizer, Control Flow Integrity, LibFuzzer и AFL. В рамках программы по выплате денежного вознаграждения за обнаружение дыр в безопасности для текущего релиза Google выплатила 24 премии на общую сумму 32 500 $.

Предыдущая версия браузера вышла в апреле 2018 года. В Google Chrоme 66 изменилось поведение звука и появились новые инструменты для разработчиков.

Крупные диалоговые окна

Другая экспериментальная настройка Material Design будет работать в связке с любым из двух рассмотренных выше вариантов оформления верхушки окна браузера. Она внедряет Material Design в диалоговые окна и подобного рода формы. В поисковик раздела экспериментальных настроек вводим:

Выбираем позицию «Enabled». Перезапускаем браузер.

Изменения увидим, когда в окне Chrome Canary появится диалоге окно, к примеру, форма добавления закладок. Она стала просторней и обрела стиль со скруглёнными углами форм. Опять же, новшество для удобства управления на сенсорных устройствах.

Немного поздновато, конечно, Google решила позаботиться о пользователях сенсорных Windows-устройств. На данный момент лучше всего под работу с тачскринами оптимизирован Microsoft Edge — родной браузер Windows 10. В меньшей степени, тем не менее лучше, чем Chrome, оптимизированы Firefox Quantum и Opera.

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector