Тестування адаптивних сайтів

Як правильно помічають багато хороші хлопці , Перевірити працездатність вашого адаптивного творіння на айфончік недостатньо. Як мінімум, варто потурбуватися декількома основними платформами: iOS, Android (а там свій зоопарк браузерів), Windows Phone, Blackberry.

Якщо ви Лев Толстой не тільки на словах, то все перераховане - ваш обов'язковий мінімум, який ви радісно розширюєте будь-якими попадаються під руку залізяччям і емуляторами.

Коротко про десктопні браузери

Windows

Насамперед - останні стабільні версії Firefox, Chrome, Opera, Safari, IE, плюс Opera 12, з цим все ясно. Через рік-півтора про 12 Опері і движку Presto можна буде забути назавжди :-(

Основний затикаючи, як завжди, з IE. Користувачі майже рівномірно розмазані по трьох версіях браузера. Кілька версій IE тримати в системі не можна, всякі ИЕ-тестери - лажа. Навіть якщо запрацюють, рідний ікспішний рендеринг шрифтів з їх допомогою побачити не вийде.

Вихід - ставимо VirtualBox, клонуємо три виртуалки з winXP, віддаємо їм по 192 Mb оперативки і ставимо, відповідно, 6, 7 і 8 віслюків. IE6 я особисто тримаю для всяких рідкісних випадків. На його повноцінну підтримку я давно забив.

IE7 теж пора відправляти на смітник, але зазвичай вся його підтримка закінчується п'ятьма правилами в стилях і підключенням фоллбека для іконочние шрифтів. Всі інші фоллбекі застосовуються і до IE8, який все ще доводиться підтримувати.

Робимо ще одну виртуалку на Win 7 (512 Mb оперативки) і ставимо туди IE9. Все це господарство чудово літає паралельно:

Уї-і-і-і

Сподіваюся, автообновление IE10 позбавить мене від ще однієї виртуалки, коли вийде IE11. Поки що не позбавило.

За бажанням можна поставити який-небудь Firefox 3.6. Часто допомагає відловити прості баги, пов'язані з використанням нових властивостей CSS. Зазвичай легко фікс фоллбеком на старі властивості. Така собі перевірка на Graceful Degradation.

Linux & Mac

Варто також мати виртуалку з яким-небудь дистрибутивом Лінукса, і, якщо є можливість, схопити залізяку з OS X. Відмінності рендеринга в одних і тих же браузерах в різних системах незначні, поки справа не доходить до системних компонентів. Наприклад, значно відрізняється поведінка елементів форм, рендеринг шрифтів і зовнішній вигляд курсорів.

Мобільні пристрої

Перше правило: є можливість тестувати на залізці, а не на емуляторі, - тестируйте на залізці. Ось пара причин:

• Емулятор не приторкнутися. Розмір тексту, посилань, кнопок, роботу Тача в цілому можна адекватно оцінити тільки на пристрої.
• Продуктивність емулятора часто не відповідає продуктивності залізяки. Чи не вийде побачити гальма і переповнення пам'яті на слабких пристроях, не оцінити швидкість відтворення анімацій і роботи скриптів.
• Багато глючних і незручних емуляторів.
• Відсутність емуляторів рідкісних пристроїв.

Моя первісна ідея купити по влаштуванню на кожній з популярних операційних систем (iOS, Android, Windows Phone) здійснилася і переросла в збиральництво рідкісних девайсів з браузером на борту.

Так в колекції з'явилися Kindle Keyboard і Kindle Paperwhite зі своїми чорно-білими вебкітамі, Nokia Asha 501 (мобілка на модифікованій S40 з жахливим Ovi браузером і не такою жахливою Оперою міні на JAVA), Nintendo DSi, куплена після прочитання ось цієї статті , І багато інших залозок.

зоопарк

Тут важливо відзначити, що будь-який великий проект буде практично нереально протестувати на цьому звіринці. Основна мета - не підтримка кожного пристрою з його набором багів в окремо, а грамотна оптимізація сайту. При цьому сайт зовсім не обов'язково повинен працювати на всіх пристроях однаково. Досить забезпечити доступність контенту і позбутися від найбільш гидких багів, по можливості уникаючи сніффінга (хоча це і не завжди можливо).

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

Купуйте девайси, відбирайте мотлох у друзів, замовляйте рідкісні штуки на dx.com і ебее . Розводите свій зоопарк.

На чому тестувати

Обов'язковий набір:

• iOS - Safari і Opera Mini
• Android - дефолтний браузер на 2.x, дефолтний браузер на 4.x, Chrome, Firefox, Opera Classic, Opera, Opera Mini
• Windows Phone 8
• Blackberry 10

Бонус-пак в порядку суб'єктивної важливості:

• Java-додаток Opera Mini
• Windows Phone 7.8
• Минулі версії iOS
• Минулі версії Blackberry
• Android 3.x
• Nokia Browser

For fun:

• Kindle Keyboard, Touch & Paperwhite
• Sony PSP, PS Vita
• Nintendo DSi, 3DS
• Ovi browser (Nokia Xpress)
• Steam Big Picture browser
• Телекі зі смарт-тв, холодильники з інтернетом, будь-які інші залізяки і емулятори, до яких дотягнуться руки

Де взяти емулятори

• Android - качаємо SDK, розпаковуємо, запускаємо SDK Manager, ставимо пакети з потрібними версіями Андроїда, далі в меню зверху Tools> Manage AVDs, створюємо девайс, запускаємо, профіт.
• Windows Phone 8
• Windows Phone 7.1 + оновлення до 7.8
• Blackberry (знадобиться VMware Player )
• Opera Mobile Classic
• Симулятор Opera Mini - Java-додаток. Так виглядає Опера Міні під Сімбіаном. Є невеликі відмінності в рендеринге від Опери міні на Агіос і Андроїд.
• Nokia Asha з браузером Ovi.
• Нокіевскій емулятори Сімбіан (Зокрема, цікавий Symbian Belle з браузером на Вебком)
• Віддалений доступ до мобілок Nokia через Java-додаток. Доведеться зареєструвалися учетку. Отрісовка засмикана, відгук гальмівний, але глянути, що з себе представляє телефон і який там браузер живе - зійде.
• Симулятор Firefox OS у вигляді плагіна для Фаерфокса.

Дебаггінг на мобільних пристроях

Android

У стоковому браузері набираємо в адресному рядку about: debug. Після цього в настройках браузера з'являється пункт «Налагодження» з різними опціями, в тому числі можливістю включити консоль.

У кульгавого під андроїдом можна скористатися налагодженням через десктопний хром :

• ставимо плагін на десктопний Хром
• Включаємо USB debugging в налаштуваннях девайса
• Підключаємо девайс шнурком
• Профіт

Отримуємо повний набір вебкітовскіх інструментів. Всі зміни в реалтайм відображаються на девайсе:

iOS

Якщо вам пощастило мати під рукою Мак, можна подебажіть пристрій на Агіос через веб-інспектор Маковського Сафарі:

• Заходимо на девайсе в налаштування> Safari> Advanced, включаємо Web Inspector
• Підключаємо девайс шнурком
• В меню Develop Макосвкого Сафарі бачимо свій девайс зі списком відкритих сторінок

Так само як і на Андроїд, доступний повний набір вебкітовскіх інструментів.

Blackberry

На блекберрі є віддалена налагодження через веб-версію вебкітовскіх девтулзов :

• Підключаємо девайс по USB, або вішаємо його на один вай-фай з комп'ютером.
• В налаштуваннях браузера на девайсе включаємо веб-інспектор. Там же з'явиться IP і порт. В емуляторі IP не з'явиться, але його можна подивитися в контролері емулятора, в нижній частині вікна (контролер йде разом з емулятором як окрема програма). Порт при цьому буде одна тисяча триста тридцять сім.
• Заходимо за адресою IP: Port з десктопного браузера, отримуємо вебкітовскую девпанель у вигляді веб-сторінки.

Як це не смішно, але панель у мене погодилася нормально працювати тільки в Опері 15:

Віддалений дебаггінг браузера на емуляторі Blackberry

Jsconsole.com

Відмінний інструмент для дебаггінга практично будь-якого девайса. Вставляємо на свій сайт скрипт з унікальним айдішніком (бажано до запуску інших скриптів, щоб не пропустити логи і помилки), отримуємо віддалену консоль з висновком помилок і можливістю виконувати команди. Головне - не забудьте прибрати скрипт з продакшена.

можна почитати докладніше про використання .

своя Консолька

Якщо jsconsole використовувати з якоїсь причини незручно, завжди можна написати свою консоль, заредефайнів console.log, console.warn, console.error, window.onerror і ще щось до смаку. Вийде досить простий інструмент, якого достатньо в більшості випадків.

Дуже примітивний приклад:

var customConsole = {log: function (message) {this. add (message, 'info'); }, Warn: function (message) {this. add (message, 'warning'); }, Error: function (message, source, file) {this. add ([message, source, file]. join ( '<br>'), 'error'); }, Add: function (message, type) {if (typeof message! == 'string') message = '<i>' + message + '</ i>'; document. getElementById ( 'console'). innerHTML + = '<p class =' ​​+ type + '>' + message + '</ p>'; }} If (dev_console) {window. console = customConsole; window. onerror = function (message, source, file) {console. error (message, source, file); }; }

Допілівать за смаком і потребам.

Тестування сайту, запущеного на локальному веб-сервері

Все просто. Для початку знадобиться wi-fi роутер. Підключаємо всі пристрої і комп'ютер з веб-сервером до роутера, отримуємо сіть. В налаштуваннях мережі на комп'ютері можна для зручності виставити руками фіксований IP, так як автоматичний має тенденцію раптово змінитися, після чого доводиться заново вбивати закладки на всіх пристроях. Цей же IP прописуємо в конфіги вебсервера, наприклад для енжінкса:

server {... listen 192.168.1.5:4000; listen 127.0.0.1:4000; ...}

Все, можна заходити з залозок.

Якщо сервер запущений на віртуальній машині, видаємо їй мережевий міст (з налаштувань програми віртуалізації). Машинка отримує IP в підмережі роутера, використовуємо його для доступу до сайту як з залозок, так і з хост-системи.

Тестування в браузерах з серверсайд-рендерингом

Тобто в Опері Міні. Ну і в такому треш, як Ові, якщо у кого руки дійдуть.

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

Мій вихід - зробити на хостинг-сервері тестовий піддомен з http-авторизацією і періодично пулл туди актуальну версію сайту гітом. Сайт залишиться доступний ззовні, при цьому під паролем. Приклад конфіга http-авторизації (на цей раз для апача):

<VirtualHost *: 80> ... <Location /> Deny from all Allow from #YOUR IP HERE AuthUserFile / etc / apache2 / users AuthName testdomain AuthType Basic Satisfy Any require valid-user </ Location> ... </ VirtualHost>

Після Allow from можна вказати свій IP, щоб спростити доступ до домену зі звичайних браузерів.

Про додаванні пар юзер / пароль можна почитати в документації апача . Якщо коротко, htpasswd -cm / etc / apache2 / users username запитає у вас пароль, після чого зробить файл за вказаним шляхом і створить там юзера username з зашифрованим в MD5 паролем. Будьте обережні, прапор -c перезаписує існуючий файл.

TL; DR

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

Посилання по темі