• Главная
  • Карта сайта
Не найдено

Режим емуляції мобільних пристроїв в Chrome

  1. Режим емуляції - розділ Device
  2. Режим емуляції - розділ Screen
  3. Режим емуляції - розділ User Agent
  4. Режим емуляції - розділ Sensors
  5. Повернення браузера в звичайний режим
  6. Мені більше не потрібні пристрої
  7. від перекладача

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

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

Процес тестування також ускладнюється завдяки пристроям з сенсорним екраном і моніторів з високою роздільною здатністю. Якщо ви ведете розробку проекту на звичайному 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" внизу цього списку:

Вибираємо зі списку потрібний пристрій і тиснемо кнопочку 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 при натисканні миші на іконці з'явитися вікно з попередньо встановленими розмірами екранів пристроїв:

У подальших поясненнях робота з плагінів не потребує, як мені здається.

На цьому все.

Але тоді яким же чином можна протестувати програму і уникнути при цьому необхідно переключитися між різними пристроями?
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью