Знакомимся с Vorlon.js — отладка веб-приложений
Мы продолжаем публиковать в нашем блоге авторские статьи на темы разработки приложений. Встречайте первую статью от Андрея StealthDogg Веселова — опытного веб-разработчика и Microsoft MVP.
Не секрет, что в большинстве веб-браузеров есть инструменты для разработчиков. С их помощью можно получить информацию о DOM, состоянии выполняемых скриптов, времени загрузки страницы и т.д. Но существуют ситуации когда они отсутствуют или не доступны. Например, в мобильных или IoT устройствах. Тогда на помощь приходит Vorlon.js.
Что такое Vorlon.js
Vorlon.js это бесплатный инструмент, который позволяет получить и отобразить в браузере разработчика различную отладочную информацию от клиентов отлаживаемого веб-приложения. Он использует node.js и написан на языке TypeScript, который является надмножеством JavaScript. Таким образом, его можно применять для отладки веб-приложений практически на любой платформе.
Посмотрим на возможности Vorlon.js. Его окно внешне схоже с окнами инструментов разработчика в браузерах:
Слева в окне расположен список клиентов, подключенных к отлаживаемому веб-приложению. Определить, какая строка соответствует каждому из них, можно нажав кнопку «Identify a client». После этого их браузеры выведут на экран свой индекс.
Vorlon.js использует модульную архитектуру, поэтому каждое из его окон является по сути подключенным модулем (plugins). По умолчанию доступны:
- Dom Explorer — отображает DOM, свойства элементов (стили и компоновку) и позволяет изменять их. Все модификации производятся только у выбранного в данный момент клиента. При этом при активный элемент подсвечивается в браузере.
- Obj. Explorer — используется для просмотра значений свойств различных объектов.
- XHR — позволяет в реальном времени отслеживать Ajax запросы.
- Network Monitor — показывает какие ресурсы и за какое время были загружены в браузер клиента.
- Resource Explorer — выводит список пар «ключ-значение» находящихся в локальном хранилище, сессии и cookies.
В нижней части окна расположены еще два модуля:
- Интерактивная консоль для отображения сообщении из выполняющихся на клиенте скриптов и взаимодействия с его DOM на JavaScript.
- Modernizr, использующий одноименную библиотеку для отображения списка возможностей, которые поддерживает выбранный клиент.
Кнопка »+» открывает страницу со списком доступных модулей. На момент написания этой статьи дополнительно можно подключить ngInspector для исследования содержимого scope в AngularJs.
Список модулей и указание места их расположения на панелях находится в файле config.json. Кроме того, в нем же можно настроить параметры для использования SSL соединения.
Кстати, упомянутый выше ngInspector уже входит в комплект поставки, но отключен по умолчанию. Для его активации нужно установить параметр enabled в значение true.
Если все еще не хватает функциональности, то можно самостоятельно написать модуль для Vorlon.js. Пример есть в исходном коде проекта.
Чтобы начать использовать Vorlon.js необходимо сделать 2 простых шага:
- Установить Vorlon.js на веб-сервер как самостоятельное веб-приложение.
- Добавить тег