Удаленная отладка для Front-End разработчиков

Удаленная отладка для Front-End разработчиков

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

Weinre

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

Установка

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

В документации четко не сказано, как работать 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 файл с набором стилей, чтобы было что удаленно инспектировать:

Как запустить Weinre

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

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

Запустите ваш любимый webkit браузер и вбейте адрес сервера weinre: http://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

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree