Віддалена налагодження для Front-End розробників

9

Від автора: Front-End розробка вважалася нескладною роботою. Вам потрібно було встановити купу браузерів на кілька комп’ютерів/ операційних систем, фізичних або віртуальних. А для вирішення проблем сумісності необхідно було використовувати вбудовані інструменти розробника або знайти іншу реалізацію веб-стандарту. Це більше не працює, тому що стільникові мережі стали швидше, телефони розумнішими, а легкі планшетні пристрої стали ще одним способом поєднання людей в інтернеті, де б вони не знаходилися. Налагодження на таких мобільних пристроях відрізняється від звичної нам. А той факт, що на мобільних пристроях працює більше десятка різних браузерів, не робить цю роботу ще легше. Ось тут нам і допоможе віддаленого налагодження.

Weinre

WEb INspector REmote створений для віддаленого аналізу та налагодження веб-сторінок на різних пристроях. Корисний інструмент, особливо, коли необхідно провести налагодження «UIWebView» або Safari на iOS, працюючи з Linux або Windows. Weinre повторно використовує код інтерфейсу з веб інспектора в браузерах Webkit, так що більшості front-end розробників повинен бути знайомий даний інструмент.

Установка

На офіційному сайті є документація по установці. Так як цей інструмент це node.js модуль, то спочатку необхідно встановити цю бібліотеку. На Mac OSX і Linux після установки Node.js подальша установка дуже проста:

sudo npm -g install weinre

В документації чітко не сказано, як працювати weinre на Windows, і я вирішив детальніше описати цей процес. Перше – необхідно знати свій IP адреса, бо зайти на localhost або 127.0.0.1 не вийде. Дізнатися свій IP в Linux і Mac OS можна командою ifconfig, а в Windows через ipconfig. Для розробників, які хочуть працювати з weinre, найкращий варіант це статичний IP адреса, інакше доведеться дізнаватися свій IP після кожного завантаження комп’ютера! Як отримати певний IP адреса не входить в тему нашої статті, але про це можна почитати в керівництві для Windows, керівництві для Mac OSX і для Ubuntu.

Потім вам знадобиться HTTP сервер, так як ви не можете завантажувати HTML файли на мобільний пристрій (ось чому необхідно знати IP свого комп’ютера!). Можна використовувати node.js, Apache, IIS або статичні генератори сайтів типу Middleman і Jekyll – працюйте з тим, що вам зручніше. Також є a RubyGem, який додає простий хелпер метод в Middleman. Я буду працювати в Apache і зберігати статичний HTML файл з набором стилів, щоб було що віддалено інспектувати:

WEb INspector REmote
.flex-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-box {
-webkit-box-flex: 1;
-webkit-flex: 1 1 30em;
-ms-flex: 1 1 30em;
flex: 1 1 30em;
}

Remote for Debugging Front-end Developers

Front-end development used to be (kind of) easy.
One could easily install a bunch of browsers on a couple
of different computers / operating systems, physical
or virtual, and use the developer tools built in almost
every browser to solve compatibility problems, work or
around different implementations web of standards.
This is no longer the case, not since cellular networks
became faster, phones became smarter and light «tablet»
devices offered a new way people to connect to the internet
from wherever they are. Debugging in these (mostly)
mobile devices is a different kind of game, and the fact
that more than a dozen different mobile browsers
is not exist making the job any easier.

weinre is WEb INspector REmote. Pronounced like
the word «winery». Or maybe like the word «weiner». Who
knows, really.

WEb INspector REmote was built to enable remote inspection
and debugging of web pages across different devices. It’s a
useful tool, especially when you need to debug a «UIWebView»
or on Safari iOS while on developing Linux або Windows. weinre
*reuses the user interface code from the Web Inspector project
at WebKit* so most front-end developers should already be
familiar with the toolbox.

Як запустити Weinre

Створіть файл server.properties в директорії .weinre, якщо не хочете налаштувати weinre при кожному запуску. Відкрийте командний рядок в папці профілю (користувачі Windows повинні використовувати консоль для створення папки з цим ім’ям! Натисніть Win+R і вбийте cmd) і наберіть mkdir .weinre для створення нової папки. Кінцевий шлях для користувачів Windows буде приблизно C:\Users\YOU_USER_NAME\.weinre. Після додавання папки створіть новий текстовий файл з ім’ям server.properties і запишіть у нього:

boundHost: -all-
httpPort: 8081
reuseAddr: true
readTimeout: 1
deathTimeout: 5

Можете змінювати httpPort, якщо поточний зайнятий. Тепер можна запустити weinre , набравши в командному рядку weinre, і weinre буде працювати на обраному порте. Додайте сторінку для налагодження наступний рядок (або у наш тестовий файл HTML вище):

Запустіть ваш улюблений браузер webkit і вбийте адресу сервера weinre: http://YOUR_IP_ADDRESS:8081/client/. Це ваш відладчик! Тепер відкрийте сторінку, в яку додали скрипт, на смартфоні/планшеті, в різних браузерах, комп’ютері або навіть на віртуальній операційній системі/пристрої – не має значення. В налагоджувач повинен з’явитися клієнт. Цю панель можна використовувати для інспектування сторінки на пристрої! Можна переглядати велику частину CSS на будь-якому сайті DOM, додавати, видаляти або змінювати инлайновые стилі, а також бачити всі повідомлення від JavaScript в консолі. В консолі також можна запускати команди JS і маніпулювати DOM. Цього функціонала повинно бути більш ніж достатньо для визначення будь-якої помилки візуалізації або не незрозумілої поведінки.

Weinre в дії

Нижче приклад інспектування браузера за замовчуванням в Android 4.1.2:

Віддалена налагодження для Front-End розробників

З допомогою JS консолі можна змінити колір тексту:

Віддалена налагодження для Front-End розробників

Як і інші JS команди:

Віддалена налагодження для Front-End розробників

Додатки використовують Weinre

Prepros – інструмент для компіляції Less, Sass, Compass, Stylus, Нефриту і т. д. з автоматичним додаванням CSS префіксом, вбудований сервер для тестування кросбраузерності віддаленого налагодження. Багатоплатформовий інструмент.

Valence

Valence – аддон для Firefox, який додає у панель розробника віддалене інспектування/налагодження Gecko браузерів, Chrome і Safari на iOS. «Метою» налагодження може бути iOS пристрій або настільний браузер Chrome (для віддаленого інспектування використовуйте прапор —remote-debugging-port=9222 – див. параграф Chrome Desktop setup на сайті Valence) або Firefox OS. На жаль Valence не може інспектувати емулятори Android і старі версії Android, але він вміє інспектувати UIWebViews і Simulators на iOS – хоча я не пробував, тому що у мене немає комп’ютера Apple.

Смартфон або планшет повинні бути фізично підключені до комп’ютера. Якщо ви працюєте на Windows, вам доведеться встановити USB драйвера пристрою, які можуть бути, а можуть і не бути! Також вам доведеться встановити iTunes для налагодження iOS. І нарешті, необхідно активувати режим розробника або налагодження USB — не забудьте отлючить ці настройки після закінчення налагодження! У Valence на даний момент не так багато можливостей, а також як інструмент знаходиться в беті, то він ще й нестабільний. Однак це дуже перспективний інструмент.

Valence в дії

Інспектування HTML документа і стилів браузера Chrome через смартфон на Android 5:

Віддалена налагодження для Front-End розробників

Інспектувати можна будь-сайт:

Віддалена налагодження для Front-End розробників

Можна додати атрибут кольору до SVG шляху, щоб змінити логотип:

Віддалена налагодження для Front-End розробників

Ой да, React… дякую, що залишив мені повідомлення внизу консолі!

Віддалена налагодження для Front-End розробників

Приклад налагодження JavaScript:

Віддалена налагодження для Front-End розробників

Висновок

Налагодження будь-яких CSS невідповідностей або нестабільного поведінки JS в браузері настільного комп’ютера – досить легке заняття і майже не потрібно, оскільки більшість сучасних браузерів регулярно оновлюються і підтримують величезний набір веб-стандартів. Однак мобільні браузери це проблема для розробки. Їх буквально десятки. В базі даних сайту Can I Use міститься цінна інформація про підтримку стилів CSS і JavaScript API на різних платформах. Проте наші знання про підтримку конкретного властивості в конкретному браузері іноді відрізняється від того, що ми бачимо або не бачимо зовсім! Weinre та Valence можуть дуже допомогти front-end розробникам, надаючи можливість віддаленого інспектування та налагодження мобільних пристроїв.