Как сделать режим телефона в браузере
На сегодняшний день тестирование страниц становиться непростой задачей. Времена, когда проверка работоспособности сайта ограничивалась парой браузеров, давно прошли.
Сегодня ваше творение необходимо тщательно проверять в целом диапазоне мобильных телефонов, планшетов и настольных систем с различными операционными системами, разрешениями экранов и возможностями. В особо серьезных случаях процесс тестирования может занять столько же времени, сколько и разработка проекта.
Процесс тестирования также усложняется благодаря устройствам с сенсорным экраном и мониторов с высоким разрешением. Если вы ведете разработку проекта на обычном PC с помощью таких же обычных мыши и клавиатуры, то вам будет трудно оценить работоспособность вашего кода в реальных условиях (на всех вышеперечисленных устройствах). Такая возможность, как событие мыши hover может не работать и ваше приложение становиться неработоспособным. Но тогда каким же образом можно протестировать программу и избежать при этом необходимости переключения между различными устройствами?
К счастью, сегодня выход из этой ситуации есть. В браузер Chrome версии 32 был добавлен режим эмуляции. С помощью него можно решить многие вышеназванные проблемы, не покидая комфортного окружения PC.
Запустите установленный 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 является простым и быстрым способом протестировать страницу, без необходимости проверки на реальных устройствах, таких как смартфоны или планшеты. Кроме того, у вас есть полный набор инструментов разработчика, что может сэкономить несколько часов вашего труда.
От переводчика
Хочется от себя немного добавить в эту тему. В книге Б. Фрейна “HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств” автор приводит краткий список плагинов для тестирования страниц в различных браузерах. Эти плагины не такие “продвинутые”, как режим эмуляции в браузере Chrome. Их задача сводиться только к одному - проверке работоспособности страниц на экранах различных устройств, с разными размерами области просмотра. Цель такой проверки - создание полностью рабочего адаптивного дизайна сайта.
Для браузера Safari автор рекомендует расширение Resize или ResizeMe. Под браузер Mozilla Firefox имеется плагин Firesizer. А под браузер Google Chrome автором рекомендуется использовать расширение Windows Resizer.
Например, после установки и активизации расширения Windows Resizer под Chrome при щелчке мыши на иконке появиться окно с предустановленными размерами экранов устройств:
В дальнейших объяснениях работа с плагином не нуждается, как мне кажется.
Тестирование веб-сайтов становится все более и более сложным делом. Дни, когда верификация функционала осуществлялась в паре браузеров, давно канули в лету.
Ваш шедевр должен быть тщательно проверен на ряде планшетов, мобильных и настольных устройств с разными операционными системами, разрешением экрана и возможностями. В худших случаях, процесс тестирования может занять столько же времени, сколько и сама разработка.
Процесс осложняется еще и сенсорными экранами и дисплеями с высокой плотностью. Если вы пишете код на обычном компьютере с мышью и клавиатурой, то сложно оценить, как ваш шедевр будет функционировать.
Такие функции, как наведение мыши, необязательно работают, и ваше приложение может оказаться неработоспособным. Но как можно протестировать систему и обойтись без переключения между несколькими устройствами?
К счастью, в Chrome 32 был добавлен новый режим эмуляции мобильных устройств. Это поможет выявлять ранние проблемы разработки, не покидая зону комфорта вашего компьютера.
Для начала вам нужен Chrome не ранее 32 версии. Запустите 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 намного проще, чем переключение на реальный смартфон или планшет. К тому же, все средства разработки будут в вашем распоряжении. Это может сэкономить время и ваши усилия.
На сегодняшний день тестирование страниц становиться непростой задачей. Времена, когда проверка работоспособности сайта ограничивалась парой браузеров, давно прошли.
Сегодня ваше творение необходимо тщательно проверять в целом диапазоне мобильных телефонов, планшетов и настольных систем с различными операционными системами, разрешениями экранов и возможностями. В особо серьезных случаях процесс тестирования может занять столько же времени, сколько и разработка проекта.
Процесс тестирования также усложняется благодаря устройствам с сенсорным экраном и мониторов с высоким разрешением. Если вы ведете разработку проекта на обычном PC с помощью таких же обычных мыши и клавиатуры, то вам будет трудно оценить работоспособность вашего кода в реальных условиях (на всех вышеперечисленных устройствах). Такая возможность, как событие мыши hover может не работать и ваше приложение становиться неработоспособным. Но тогда каким же образом можно протестировать программу и избежать при этом необходимости переключения между различными устройствами?
К счастью, сегодня выход из этой ситуации есть. В браузер Chrome версии 32 был добавлен режим эмуляции. С помощью него можно решить многие вышеназванные проблемы, не покидая комфортного окружения PC.
Запустите установленный 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 является простым и быстрым способом протестировать страницу, без необходимости проверки на реальных устройствах, таких как смартфоны или планшеты. Кроме того, у вас есть полный набор инструментов разработчика, что может сэкономить несколько часов вашего труда.
От переводчика
Хочется от себя немного добавить в эту тему. В книге Б. Фрейна “HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств” автор приводит краткий список плагинов для тестирования страниц в различных браузерах. Эти плагины не такие “продвинутые”, как режим эмуляции в браузере Chrome. Их задача сводиться только к одному - проверке работоспособности страниц на экранах различных устройств, с разными размерами области просмотра. Цель такой проверки - создание полностью рабочего адаптивного дизайна сайта.
Для браузера Safari автор рекомендует расширение Resize или ResizeMe. Под браузер Mozilla Firefox имеется плагин Firesizer. А под браузер Google Chrome автором рекомендуется использовать расширение Windows Resizer.
Например, после установки и активизации расширения Windows Resizer под Chrome при щелчке мыши на иконке появиться окно с предустановленными размерами экранов устройств:
В дальнейших объяснениях работа с плагином не нуждается, как мне кажется.
TypeScript - размеченные объединения
> Пользовательское объединение типов - что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):
Существуют сайты, функционал которых доступен в полном объеме только в десктопных браузерах, но бывает и наоборот, когда некоторые специфические функции сайта доступны только при открытии его в мобильных браузерах. А еще вы можете просто захотеть посмотреть, как будет выглядеть тот или иной сайт на экране мобильного телефона или планшета. В интернете имеются сервисы, которые «конвертируют» интерфейс сайтов в соответствии с их мобильными версиями.
Но ведь тоже самое можно сделать и в обычном десктопном браузере, включив в панели разработчика режим эмуляции. Давайте посмотрим, как воспользоваться им в Chrome , Mozilla , Opera и Microsoft Edge .
В Google Chrome
Находясь на странице тестируемого сайта, откройте главное меню браузера и выберите в нём «Дополнительные инструменты» -> «Инструменты разработчика».
В открывшейся справа или снизу панели кликните по значку «Toggle device toolbar» или нажмите комбинацию клавиш Ctrl + Shift + M . В левой колонке окна Chrome тут же отобразится сайт с примененным к нему адаптивным шаблоном. Чтобы выбрать конкретное мобильное устройство, вызовите выпадающий список «Responsive» и укажите в нём наиболее подходящую модель мобильного гаджета. Если нужной вам модели в списке не окажется, выберите в этом же меню опцию «Edit».
И поищите ее в расширенном списке устройств. В случае отсутствия модели, нажмите «Add custom device».
И добавьте ее вручную, указав разрешение экрана.
После нажатия «OK» модель появится в списке «Responsive».
В Mozilla Firefox
В браузере Firefox нужно открыть главное меню и выбрать в нём «Веб-разработка».
«Адаптивный дизайн».
При этом к открытой странице тут же будет применен адаптивный шаблон, а вверху появится панель инструментов, на которой мы сможете выбрать нужную вам модель мобильного гаджета. Если модели нет, жмем «Изменить список».
И отмечаем галочкой в расширенном списке наиболее подходящее устройство, а в случае отсутствия шаблона добавляем свое.
В желании можно даже включить эмуляцию сенсорного ввода (мышка станет работать как палец или стилус) .
В Opera
Поскольку Opera построен на том же движке, что и Chrome, эмуляция мобильного браузера в этом веб-обозревателе почти ничем не отличается от эмуляции в Google Chrome.
В главном меню выбираем «Разработка» -> «Инструменты разработчика».
И жмем в открывшейся справа панели иконку «Toggle device toolbar». Далее в меню «Responsive» выбираем подходящее устройство или добавляем его через «Edit».
В Microsoft Edge
Аналогичным образом можно получить доступ к эмуляторам мобильных версий в Microsoft Edge, так как этот браузер тоже использует движок рендеринга Chrome, отличаются только названия опций.
Вызвав главное меню обозревателя, выберите в нём «Другие инструменты» -> «Средства разработчика».
В открывшейся справа панели кликните по значку «Включить или отключить эмуляцию устройства» и выберите в уже известном вам списке «Responsive» (в Microsoft Edge он называется «Реагирует») свой гаджет или добавьте его, выбрав/создав в списке устройств наиболее соответствующий вашей модели шаблон.
Работать в эмулируемых мобильных браузерах можно так же, как и в обычных десктопных обозревателях.
Ссылки, кнопки, меню и прочие интерактивные элементы должны нормально функционировать, но возможны и исключения: некоторые функции могут быть недоступны по причине аппаратных ограничений.
Для ПК существует несколько интересных программ, эмулирующих среду Android. С их помощью получится запускать мобильные приложения непосредственно в Windows. Но также имеется специальное расширение для Хрома. Именно о нем хотелось бы поговорить в этом материале. Разберемся, как установить эмулятор Андроид в браузере Google Chrome и как им пользоваться.
Руководство
Начнем с самого простого и незамысловатого – установки расширения. Да-да, эмулятор действительно существует и, дабы в этом убедиться, предлагаем изучить следующую пошаговую инструкцию:
Теперь на панели инструментов (напротив адресной строки в правой части пользовательского окна) появляется новое лого. Ну что же, приступаем к осмотру графической оболочки.
Использование
Для активации дополнения достаточно кликнуть по ярлыку левой кнопкой мыши. Перед нами появляется выпадающий список, состоящий из трех разделов:
- Запустить Android-эмулятор – активация встроенного функционала и переход на официальный сайт.
- My Apk Manager & Apk Upload – возможность загружать и устанавливать приложения для Андроид через APK-файлы.
- Set userID – это нужно для регистрации и авторизации на сайте разработчиков (после ввода ника нас автоматически перебрасывает на оф. площадку).
Итак, с вопросами графической оболочки разобрались. Давайте перейдем к практическому использованию. Запустить виртуальное устройство можно, если нажать на первый пункт.Затем нужно подождать тридцать секунд, пока приложение не загрузится. Сразу же после вы увидите привычный интерфейс Андроид в планшетной ориентации. По краям основного окна имеется реклама.
В левой верхней части экрана имеется блок Zoom. Он отвечает за увеличение или уменьшение размера рабочей области. А чуть правее расположена панель управления виртуальным устройством. Рассмотрим ключевые ее элементы сверху вниз:
На каждое действие разработчики предусмотрели набор горячих клавиш, подсвечивающийся при наведении курсора.Существует два способа запуска Андроид-приложений:
- С помощью Play Store, но нужно авторизоваться в учетной записи Google.
- Через отдельные APK-файлы.
Для первого вам достаточно кликнуть по соответствующей иконке на рабочем столе, войти в аккаунт, а потом загрузить и открыть нужный софт. А вот второй мы разберем чуть детальнее.
Запуск приложений через APK-файл
Для претворения задуманного в жизнь достаточно выполнить несколько шагов инструкции, представленной ниже:
Подведем итоги
Расширение для сервиса ApkOnline позволяет запускать программы и утилиты, предназначенные только для Андроид. К сожалению, работает оно далеко не идеально и не так быстро, как хотелось бы, но с основной задачей справляется. А если вам нужна более высокая стабильность и производительность – обратитесь к специализированным программам. Самые удачные среди них – BlueStacks и Nox App Player.
Читайте также: