От автора: Front-End разработка считалась несложной работой. Вам нужно было установить кучу браузеров на несколько компьютеров/ операционных систем, физических или виртуальных. А для решения проблем совместимости необходимо было использовать встроенные инструменты разработчика или найти другую реализацию веб-стандарта. Это больше не работает, потому что сотовые сети стали быстрее, телефоны умнее, а легкие планшетные устройства стали еще одним способом соединения людей в интернете где бы они не находились. Отладка на таких мобильных устройствах отличается от привычной нам. А тот факт, что на мобильных устройствах работает более десятка различных браузеров, не делает эту работу еще легче. Вот тут нам и поможет удаленная отладка.
Weinre
WEb INspector REmote создан для удаленного анализа и отладки веб-страниц на различных устройствах. Полезный инструмент, особенно, когда необходимо произвести отладку ”UIWebView” или Safari на iOS, работая с Linux или Windows. Weinre повторно использует код пользовательского интерфейса из веб инспектора в браузерах Webkit, так что большинству front-end разработчиков должен быть знаком данный инструмент.
Установка
На официальном сайте есть документация по установке. Так как этот инструмент это node.js модуль, то сначала необходимо установить эту библиотеку. На Mac OSX и Linux после установки Node.js дальнейшая установка очень проста:
|
1 |
sudo npm -g install weinre |
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
В документации четко не сказано, как работать 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 файл с набором стилей, чтобы было что удаленно инспектировать:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>WEb INspector REmote</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/foundation.min.css"> <style> .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; } </style> </head> <body> <div class="wrapper"> <div class="row"> <div class="large-10 large-offset-1 column"> <h1>Remote Debugging for Front-end Developers</h1> <div class="flex-wrapper"> <div class="flex-box"> <p>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, or work around different implementations of web standards. This is no longer the case, not since cellular networks became faster, phones became smarter and light “tablet” devices offered a new way to connect people 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 exist is not making the job any easier.</p> </div> <div class="flex-box"> <blockquote cite="//people.apache.org/~pmuellr/weinre/docs/latest/Home.html"> <p>weinre is WEb INspector REmote. Pronounced like the word “winery”. Or maybe like the word “weiner”. Who knows, really.</p> </blockquote> <p>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 Safari on iOS while developing on Linux or 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.</p> </div> </div> </div> </div> </div> </body> </html> |
Как запустить Weinre
Создайте файл server.properties в директории .weinre, если не хотите настраивать weinre при каждом запуске. Откройте командную строку в папке профиля (пользователи Windows должны использовать консоль для создания папки с этим именем! Нажмите Win+R и вбейте cmd) и наберите mkdir .weinre для создания новой папки. Конечный путь для пользователей Windows будет примерно C:\Users\YOU_USER_NAME\.weinre. После добавления папки создайте новый текстовый файл с именем server.properties и запишите в него:
|
1 2 3 4 5 |
boundHost: -all- httpPort: 8081 reuseAddr: true readTimeout: 1 deathTimeout: 5 |
Можете менять httpPort, если текущий занят. Теперь можно запустить weinre , набрав в командной строке weinre, и weinre будет работать на выбранном порте. Добавьте в страницу для отладки следующую строку (или в наш тестовый HTML файл выше):
|
1 |
<script src="//YOUR_IP_ADDRESS:8081/target/target-script-min.js"></script> |
Запустите ваш любимый webkit браузер и вбейте адрес сервера weinre: //YOUR_IP_ADDRESS:8081/client/. Это ваш отладчик! Теперь откройте страницу, в которую добавили скрипт, на смартфоне/планшете, в различных браузерах, компьютере или даже на виртуальной операционной системе/устройстве – не имеет значения. В отладчике должен появиться клиент. Данную панель можно использовать для инспектирования страницы на устройстве! Можно просматривать большую часть CSS на любом DOM узле, добавлять, удалять или изменять инлайновые стили, а также видеть все сообщения от JavaScript в консоли. В консоли также можно запускать команды JS и манипулировать DOM. Данного функционала должно быть более чем достаточно для определения любой ошибки рендеринга или не непонятного поведения.
Weinre в действии
Ниже пример инспектирования браузера по умолчанию в Android 4.1.2:
С помощью JS консоли можно изменить цвет текста:
Как и другие JS команды:
Приложения использующие Weinre
Prepros – инструмент для компиляции Less, Sass, Compass, Stylus, Jade и т.д. с автоматическим добавлением 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:
Инспектировать можно любой сайт:
Можно добавить атрибут цвета к SVG пути, чтобы сменить логотип:
Ой да, React… спасибо, что оставил мне сообщение внизу в консоли!
Пример отладки JavaScript:
Заключение
Отладка любых CSS несоответствий или нестабильного поведения JS в браузере настольного компьютера – довольно легкое занятие и почти не нужно, т.к. большинство современных браузеров регулярно обновляются и поддерживают огромный набор веб-стандартов. Однако мобильные браузеры это проблема для разработки. Их буквально десятки. В базе данных сайта Can I Use содержится ценная информация о поддержке CSS стилей и JavaScript API на различных платформах. Однако наши знания о поддержке конкретного свойства в конкретном браузере иногда отличается от того, что мы видим или не видим вовсе! Weinre и Valence могут очень помочь front-end разработчикам, предоставляя возможность удаленного инспектирования и отладки мобильных устройств.
Автор: Panayiotis Velisarakos
Источник: //www.sitepoint.com/
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Редакция: Команда webformyself.
