Где тестировать адаптивный шаблон?

envato-cross-browser-testing
Рабочий стол Jordan Lewis,
front-end программиста из студии Envato.

Интересная подборка инструментов из статьи  Техники для мобильного и адаптивного кроссбраузерного тестирования от Envato .

Ghostlab предлагают приложение, устатавливаемое на рабочий дескотоп. Приложение доступно только на Win 32/64 и MacOS. Не мой вариант. Да еще и стоит 1870р, триал дают на 7 дней. Список браузеров, доступных для тестирования: Firefox, Chrome, Safari, Internet Explorer 8 & above, Opera Mobile, Opera 11, FireFox Mobile, Blackberry, Windows Phone, Safari mobile,  Android 2.3+. А еще эти ребята представляют вот такую замечательную штуку:

device_lab_stand

Штука стоит от 149$ до 499$ в зависимости от комплектации. Телефоны в комплект не входят.

Adobe Edge Inspect CC. Как написано на страничке приложения: «Edge Inspect — важное приложение для веб-разработчиков и веб-дизайнеров, которым можно просматривать созданный контент на множестве мобильных устройств. Подключите несколько устройств с ОС iOS или Android к своему компьютеру по беспроводной связи, делайте снимки экрана на любом из них и просматривайте результаты изменений кода HTML, CSS и JavaScript в реальном времени.» Из телефонов поддерживает только Android и iOS. Ну и привязка к Chrome не всем понравится.

SHIM — это node.js приложение которое позволяет синхронизировать одновременный веб-серфинг через различные устройства и браузеры. Поддержка MacOS 10.6. На 10.7 не работает.

BrowserStack — использует эмуляцию мобильных устройств и обслуживается Flash, а поэтому результат может слегка отличаться от заявленного. Cписок всего поддерживаемого действительно впечатляет — более 300 браузеров на всех возможных платформах. Есть небольшой триал, лицензия на одного юзера стоит 19$ в месяц. Имеет так же дополнительный сервис для проведения параллельного автоматического тестирования.

Crossbrowsertesting.com обещает более «1000 комбинаций браузеров, осей и плагинов». Цена уже за минуты. 150 минут тестирования в месяц обойдется в почти 30$, 3000 минут — 200$.

Browserling — позволяет быстро провести тест шаблона «без регистрации и СМС», прямо в браузере на лету выбирая браузер и версию. Мобильных браузеров нет. IE не  доступен в бесплатном режиме. Да и сам бесплатный режим весьма ограничен — всего 3 минуты на тестирование. Цены начинаются от 20$.

 

 Инструменты для разработчика в браузере.

В Chrome старше 32 версии идем DevTools > Settings > Overrides вы можете переопределить текущие настройки:

  • User Agent — прикидываемся другим браузером.
  • Размеры экрана
  • Геолокацию
  • Ориентацию экрана
  • Эмуляцию тачскрина
  • Эмуляцию CSS @media

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

В Firefox отдельно есть Responsive Design Mode, или «Адаптивный дизайн» в русской локализации. Доступно по сочетанию ctrl-shift-M.

  • Можно выбрать размер экрана
  • Ориентацию
  • Эмулировать тачскрин
  • и сохранить полученное скриншотом

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

Еще есть удаленный дебаггинг на Андроиде с Chrome и с Firefox.

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

Закладки/плагины:

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

Интерактивные ресайзеры:

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

Сравнение в несколько окон:

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

Если хотите посмотреть «вживую» поведение на мобильных браузерах, есть еще великолепный список эмуляторов.

Как видите, многообразие доступных способов проверки адаптивного дизайна просто поражает. Но, как утвердает сам автор оригинальной статьи:

Нет правильного или неправильного способа проверить мобильный или адаптивный дизайн сайта. Хорошие инструменты, безусловно, дают преимущество, но и из свободных ресурсов есть что выбрать.
Если нет возможности получить на руки устройство для тестирования, используйте эмулятор. Или такой веб-инстрймент как BrowserStack или Crossbrowsertesting.com.
Если целью является просто просмотр сайта на различных размерах экранов — используйте интерактивные ресайзеры.

  • Ігор

    Очень полезная статья.+