Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Как отлаживать JavaScript удаленно с помощью Vorlon.js

by
Difficulty:IntermediateLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Недавно на //BUILD/2015 мы анонсировали Vorlon.js -  открытый, расширяемый, платформенно-независимый инструмент для удаленной отладки и тестирования вашего JavaScript. У меня была возможность создать Vorlon.js с помощью некоторых талантливых инженеров и технических евангелистов в Microsoft (те же парни, которые принесли вам Babylon.js).

Vorlon.js работает на Node.js, Socket.IO и позднем кофе. Я хотел бы поделиться с вами тем, почему мы это сделали, и как включить его в свой собственный рабочий процесс тестирования, а также поделиться некоторыми подробностями об искусстве создания библиотеки JavaScript, подобной этой.

Vorlonjs logo

Почему Vorlon.js?

Vorlon.js помогает удаленно загружать, проверять, тестировать и отлаживать код JavaScript, работающий на любом устройстве с помощью веб-браузера. Является ли это игровой консолью, мобильным устройством или даже холодильником, подключенным к IoT, вы можете удаленно подключать до 50 устройств и выполнять JavaScript в каждом или каждом из них.

Идея здесь состоит в том, что команды разработчиков также могут отлаживать вместе - каждый может писать код, а результаты видны всем. У нас был простой девиз в этом проекте: никакого нативного кода, никакой зависимости от конкретного браузера, только JavaScript, HTML и CSS работает на устройствах по вашему выбору.

Сам Vorlon.js - это небольшой веб-сервер, который вы можете запускать с вашей локальной машины, или установить на сервере для своей команды, который обслуживает панель инструментов Vorlon.js (ваш командный центр) и общается с удаленными устройствами.

Установка клиента Vorlon.js на ваш веб-сайт или приложение так же просто, как добавление одного тега сценария. Он также расширяем, поэтому разработчики могут писать плагины, которые добавляют функции как для клиента, так и для панели управления, такие как обнаружение функций, ведение логов и отслеживание исключений.

Так почему такое имя? На самом деле есть две причины. Первая - потому, что я просто с ума схожу по Вавилону 5 (телешоу). Исходя из этого, вторая причина заключается в том, что ворлоны - одна из самых мудрых и древнейших рас во Вселенной, и поэтому они полезны в качестве дипломатов между молодыми расами. Их полезность - вот что вдохновило нас: для веб-разработчиков, все еще слишком сложно писать JavaScript, который надежно работает в различных устройствах и браузерах. Vorlon.js стремится сделать это немного легче.

Вы упомянули, что у Vorlon.js есть плагины?

Vorlon.js разработан таким образом, что вы можете легко расширить панель и клиентское приложение, написав или установив дополнительные плагины. Вы можете изменить размер или добавить дополнительные панели на панель управления, которые могут взаимодействовать в двух направлениях с клиентским приложением. Начнем с трех плагинов:

Консоль

Ведение логов. На вкладке консоли будут передаваться консольные сообщения от клиента к панели управления, которые можно использовать для отладки. Все, что регистрируется с помощью console.log(), console.warn () или console.error() появится на панели управления. Подобно F12 Dev Tool DOM explorer, вы можете увидеть дерево DOM, выбрать узел (который будет выделен на устройстве, а также обновить или добавить новые свойства CSS).

Интерактивность: вы также можете взаимодействовать с удаленной веб-страницей, введя код во вход. Введенный код будет оцениваться в контексте страницы.

Console page

DOM Explorer

Инспектор DOM показывает вам DOM удаленной веб-страницы. Вы можете проверить DOM, щелкнув по узлам, чтобы выделить их на веб-странице хоста, и если вы выберете один из них, вы также сможете просматривать и изменять его свойства CSS.

DOM Explorer page

Modernizr

На вкладке Modernizr вы увидите поддерживаемые функции браузера, о которых сообщает Modernizr. Вы можете использовать это, чтобы определить, какие функции действительно доступны. Это может быть особенно полезно на необычных мобильных устройствах или таких вещах, как игровые консоли.

Modernizr tab showing CSS features detection

Как его использовать?

Из командной строки noode просто выполните это:

Теперь у вас есть сервер, работающий на вашем localhost на порте 1337. Чтобы получить доступ к панели управления, просто перейдите к http://localhost:1337/dashboard/SESSIONID, где SESSIONID - это идентификатор текущего сеанса панели мониторинга. Это может быть любая строка, которую вы хотите.

Затем вы должны добавить одну ссылку в свой проект клиента:

Обратите внимание, что SESSIONID может быть опущен, и в этом случае он будет автоматически заменен на «default».

Вот и все! Теперь ваш клиент будет отправлять отчеты об отладочной информации в вашу панель. Давайте теперь рассмотрим пример с использованием реального сайта.

Отладка Babylonjs.com Использование Vorlon.js

Давайте возьмем http://www.babylonjs.com/ для нашего примера. Во-первых, я должен запустить свой сервер (используя node start.js внутри папки /server). Затем просто добавьте эту строку на мой клиентский сайт:

Поскольку я не определяю SESSIONID, я могу просто перейти на http://localhost:1337/dashboard. Панель выглядит так:

Vorlonjs dashboard

Sidenote: браузер, показанный выше, - Microsoft Edge (ранее известный как Project Spartan), новый браузер Microsoft для Windows 10. Вы также можете протестировать свои веб-приложения для него удаленно на вашем Mac, iOS, Android или устройстве Windows @ http://dev.modern.ie/. Или попробуйте Vorlon.js.

Вернемся к делу: например, я вижу консольные сообщения, что полезно, когда я отлаживаю Babylon.js на мобильных устройствах (например, iOS, Android или Windows Phone). Я могу щелкнуть любой узел в DOM Explorer, чтобы получить информацию о свойствах CSS:

DOM Explorer info about CSS properties

На стороне клиента выбранный узел подсвечивается красной рамкой:

client side showing the selected node highlighted with a red border

Кроме того, я могу перейти на вкладку Modernizr, чтобы увидеть возможности моего конкретного устройства:

Modernizr tab showing the capabilities of my specific device

С левой стороны вы можете увидеть список подключенных клиентов, и вы можете использовать кнопку «Определить клиента», чтобы отображать номер на каждом подключенном устройстве.

Немного больше о том, как мы построили Vorlon.js

С самого начала мы хотели быть уверены, что Vorlon.js остается как можно скорее мобильным и платформено-независимым. Поэтому мы решили использовать технологию с открытым исходным кодом, которая работала в более широком количестве окружений.

Наша среда для разработчиков - это сообщество Visual Studio, которое вы можете получить сейчас бесплатно. Мы использовали инструменты Node.js для Visual Studio и Azure для внутреннего использования. Нашим интерфейсом был JavaScript и TypeScript. Если вы не знакомы с TypeScript, вы можете узнать, почему мы создали Babylon.js вместе с ним в этом сообщении в блоге. Недавно Angular 2 был построен с использованием TypeScript. Но вам не обязательно знать это, чтобы использовать Vorlon.js.

Вот глобальная схема того, как он работает:

Vorlonjs architecture diagram

Вот части, которые мы использовали:

  • Сервер Node.js размещает страницу панели мониторинга (обслуживается с помощью Express) и сервис.
  • Служба использует Socket.IO, чтобы установить прямое соединение как с панелью управления, так и с различными устройствами.
  • Устройства должны ссылаться на простую страницу Vorlon.js, обслуживаемую сервером. Он содержит весь клиентский код плагинов, который взаимодействует с клиентским устройством и взаимодействует с панелью управления через сервер.
  • Каждый плагин разделен на две части:
    • клиентская сторона, используемая для сбора информации и взаимодействия с устройством
    • сторона панели инструментов, используемая для создания командной панели для плагина внутри приборной панели

Например, консольный плагин работает следующим образом:

  • Клиентская сторона создает хук поверх console.log(), console.warn() или console.error(). Этот хук используется для отправки параметров этих функций на приборную панель. Он также может получать заказы со стороны панели мониторинга, которые он будет оценивать.
  • Сторона панели приборов собирает эти параметры и отображает их на панели управления.

Результатом является просто удаленная консоль:

Remote console

Вы можете получить еще лучшее представление о расширяемости Vorlon.js, в том числе о том, как создавать свои собственные плагины, на веб-сайте Vorlon.js.

Что дальше?

Vorlon.js построен на идее расширяемости. Мы призываем вас внести свой вклад! И мы уже думаем о том, как мы можем интегрировать Vorlon.js в инструменты браузера dev, а также отлаживать веб-аудио.

Если вы хотите попробовать, то это всего один клик: vorlonjs.com. И больше технических документов находятся на нашем GitHub.

Еще о JavaScript

Это может вас немного удивить, но у Microsoft есть куча бесплатного материала по многим темам JavaScript с открытым исходным кодом, и мы поставили задачу создать намного больше с Microsoft Edge. Проверьте мои собственные:

Или учебная серия нашей команды:

И некоторые бесплатные инструменты: Visual Studio Community, Azure Trial и кросс-браузерные средства тестирования для Mac, Linux или Windows.

Эта статья является частью веб-технологии Tech Tech от Microsoft. Мы рады поделиться с вами Microsoft Edge и новым механизмом рендеринга EdgeHTML. Получайте бесплатные виртуальные машины или проверяйте их удаленно на устройствах Mac, iOS, Android или Windows @ http://dev.modern.ie/.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.