Warum haben wir Vorlon.JS entwickelt und wie nutzt man es, um Remote Debugging des eigenen JavaScript durchzuführen?


Aus dem englischen Original von David Catuhe.

Auf der //BUILD/ 2015 haben wir Vorlon.JS vorgestellt – ein erweiterbares, plattformunabhängiges Open Source Tool, welches genutzt werden kann, um ein Remote Debugging des eigenen JavaScript-Codes durchzuführen. Vorlon.JS wurde von einer Gruppe erfahrener Entwickler und Technical Evangelists bei Microsoft in einem internationalen Team-Projekt entwickelt (übrigens von den gleichen Entwicklern, die für http://www.babylonjs.com/ verantwortlich sind).

Vorlon.js ist mithilfe von node.JS, socket.io und einer Menge Kaffee entstanden. In diesem Artikel möchten wir die Hintergründe für die Entwicklung mit Euch teilen, zeigen wie man es in seinen eigenen Testablauf integriert und zudem ein paar Einblicke in die Entwicklung einer solchen JS-Bibliothek geben.

image

Warum Vorlon.js?

Vorlon.js hilft dabei JavaScript-Code, der auf einem beliebigen Gerät mit Webbrowser ausgeführt wird, remote zu laden, zu untersuchen, zu testen und natürlich zu debuggen. Unabhängig davon, ob es eine Spielkonsole, ein mobiles Gerät oder sogar ein vernetzter Kühlschrank ist, lassen sich bis zu 50 Geräte verbinden und JavaScript auf diesen ausführen. Eine Idee ist hier, dass Entwicklungsteams zusammen debuggen können – jeder kann Code schreiben und das Ergebnis ist sofort für alle sichtbar. Die Entwicklung wurde von einem einfachen Motto getrieben: Kein nativer Code, keine Abhängigkeiten zu einem speziellen Browser, nur JavaScript, HTML und CSS, welches auf einem Gerät der Wahl ausgeführt wird.

Vorlon.js selber ist ein kleiner Webserver, der sowohl auf einem lokalen System als auch auf einem Server installiert werden kann, um einem Team Zugriff zu geben. Dieser Server liefert das Vorlon.js Dashboard aus (die eigene Kommandozentrale) und kommuniziert mit den entfernten Geräten. Die Installation des Vorlon.js Client in die eigene Website oder App ist so einfach wie das Hinzufügen eines einzelnen Script Tags. Vorlon.js ist zudem erweiterbar, sodass Entwickler eigene Plug-Ins schreiben können, die zusätzliche Funktionen zum Client oder Dashboard hinzufügen, wie zum Beispiel Feature Detection, Logging oder Exception Tracking.

Und warum der Name? Dafür gibt es zwei Gründe: Der Erste ist die Begeisterung für die TV Serie Babylon 5. Der zweite Grund basiert auf dem Ersten und der Tatsache, dass Vorlons eines der weisesten und ältesten Völker im Universum sind und damit wichtige Hilfe bei der Vermittlung zwischen jüngeren Völkern sind. Ihre Hilfsbereitschaft hat uns inspiriert: für Webentwickler ist es immer noch zu schwer, JavaScript zu schreiben, welches zuverlässig auf diversen Geräten und Browsern funktioniert. Vorlon.js möchte das ein wenig einfacher machen.

Vorlon.js hat also Plug-Ins?

Vorlon.js wurde so entworfen, dass wir das Dashboard und die Client-Applikation einfach durch die Entwicklung und Installation zusätzlicher Plug-Ins erweitern können. Wir können die Bereiche im Dashboard verändern oder zusätzliche Bereiche hinzufügen, die bidirektional mit der Client-Applikation kommunizieren können. Zu Beginn gibt es drei Plug-Ins:

Console
Logging: Die Konsole streamt Konsolennachrichten zum Debugging direkt vom Client in das Dashboard. Alles was mit console.log(), console.warn() or console.error() als Logging-Informationen ausgegeben wird, wird im Dashboard angezeigt.

Interaktivität: Wir können außerdem mit einer entfernten Webseite interagieren, indem wir etwas in das Eingabefeld eingeben. Eingegebener Code wird im Kontext der Client-Website interpretiert.

image

DOM Explorer
Der DOM Explorer zeigt den DOM Tree der entfernten Webseite an. Wie im DOM Explorer des F12 Dev Tools kann ein Knoten ausgewählt werden. Dieser wird dann auf dem verbundenen Gerät farblich hervorgehoben. Es können außerdem CSS-Eigenschaften angezeigt und neue hinzugefügt werden.

image

Modernizr
Der Modernizr-Bereich zeigt unterstützte Browser-Funktionen an. Diese werden mithilfe von Modernizr ermittelt. Auf diese Weise können wir feststellen, welche Funktionen auf einem bestimmten Client verfügbar sind. Das kann insbesondere dann hilfreich sein, wenn ungewöhnliche Mobilgeräte oder Geräte wie Spielkonsolen angesprochen werden sollen.

image

Wie verwende ich es?

Von der Node Command Line führen wir einfach folgendes aus:

$ npm i -g vorlon

$ vorlon

Jetzt haben wir einen laufenden Server auf unserem localhost und Port 1337. Um auf das Dashboard zuzugreifen, gehen wir in unserem Browser auf http://localhost:1337 bzw. http://localhost:1337/dashboard/SESSIONID, wobei SESSIONID die ID der aktuellen Dashboard-Session ist. Diese kann ein beliebiger String sein.

Im folgenden muss nur noch ein Verweis zum eigenen Client-Projekt hinzugefügt werden:

<script src="http://localhost:1337/vorlon.js/SESSIONID"></script>

Falls SESSIONID nicht angegeben wird, wird automatisch “default” angefügt.

Das war es schon! Ab jetzt wird der Client Debug-Informationen nahtlos an das Dashboard senden. Schauen wir uns das Ganze jetzt am Beispiel einer echten Website an.

Debugging von babylonjs.com mit Vorlon.js

Wir nehmen http://www.babylonjs.com/ als unser Beispiel. Zunächst müssen wir unseren Server starten (mit dem Kommando „vorlon“ bei globaler Installation). Als nächstes müssen wir lediglich noch diese Zeile zu unserem Client hinzufügen:

<script src="http://localhost:1337/vorlon.js"></script>

Da wir keine SESSIONID definiert haben, können wir direkt auf http://localhost:1337/dashboard gehen.
Das Dashboard sieht dann so aus:

image

Anmerkung: Der Browser im Screenshot ist Microsoft Edge (während der Entwicklung Project Spartan genannt), Microsofts neuer Browser in Windows 10.

Wir können nun die Konsolenausgabe sehen, was insbesondere dann nützlich ist, wenn wir babylon.js auf einem mobilen Endgerät wie Andoid, Windows Phone oder iOS debuggen. Wir können nun zudem einen beliebigen Knoten im DOM Explorer auswählen und Informationen über die CSS-Eigenschaften erhalten:

image

Auf Seite des Clients wird der ausgewählte Knoten im DOM nun mit einem roten Rahmen hervorgehoben:

image

Darüber hinaus können wir jetzt in den Bereich Modernizr wechseln, um Informationen über die Fähigkeiten des genutzten Endgerätes zu bekommen:

image

Auf der linken Seite sehen wir eine Liste der verbundenen Clients und können zudem die Schaltfläche “Identify a Client” nutzen, um auf jedem verbundenen Gerät eine Zahl zur Identifikation einzublenden.

Ein wenig mehr zur Entstehung von Vorlon.JS

Von Anfang an wollten wir sicherstellen, dass Vorlon.JS soweit wie möglich Plattform-agnostisch und Mobile-First ist. Aus diesem Grund haben wir uns dazu entschieden, Open Source-Technologie zu verwenden, die in einer Vielzahl von Umgebungen funktioniert.

Unsere Entwicklungsumgebung war Visual Studio Community, welches kostenfrei zur Verfügung steht. Für die Entwicklung des Backends wurden die Node.JS Tools für Visual Studio und Azure verwendet. Unser Frontend basiert auf JavaScript und TypeScript. Diejenigen, die mit TypeScript noch nicht vertraut sind, können hier erfahren, warum wir Babylon.js damit entwickelt haben. Für die Verwendung von Vorlon.JS sind TypeScript-Kenntnisse jedoch nicht erforderlich.

Hier ein Schema, wie die verschiedenen Komponenten zusammenspielen:

image

Damit wurden die einzelnen Bestandteile entwickelt:

  • Ein node.js-Server hostet die Dashboard Seite (über Express) und einen Dienst
  • Der Dienst nutzt socket.io, um eine direkte Verbindung mit dem Dashboard und den verschiedenen Geräten herzustellen
  • Geräte müssen eine einfache, vom Server ausgelieferte, Vorlon.js-Seite einbinden. Diese enthält den gesamten Plug-In-Code, der mit dem Client interagiert und über den Server mit dem Dashboard kommuniziert.
  • Jedes Plug-In ist ein zwei Teile geteilt:
    • Die Client-Seite, die für das Erfassen der Informationen und die Interaktion mit dem Gerät verantwortlich ist.
    • Die Dashboard Seite, die den Bereich für die Befehlseingabe für das Plug-In im Dashboard erzeugt.

Das ist zum Beispiel die Funktionsweise des Console Plug-Ins:

  • Die Client-Seite generiert einen Hook auf console.log(), console.warn() oder console.error(). Dieser Hook wird zum Senden der Parameter dieser Funktion an das Dashboard verwendet. Er kann außerdem Anweisungen vom Dashboard entgegennehmen, die ausgewertet werden.
  • Die Dashboard-Seite sammelt diese Parameter und zeigt sie im Dashboard an.

Das Ergebnis ist eine Remote Console:

image

Hier gibt es weitere Informationen zum besseren Verständnis der Erweiterbarkeit von Vorlon.JS, zudem Informationen zum Entwickeln eigener Plug-Ins.

Was kommt als nächstes?

Vorlon.js wurde vor dem Hintergrund der Erweiterbarkeit entwickelt. Wir möchten Euch daher ermutigen, mit zu machen. Wir selber sind bereits dabei, Vorlon.JS in die Browser Tools zu integrieren und Web Audio Debugging hinzuzufügen.

Um Vorlon.JS auszuprobieren, reicht ein Klick: vorlonjs.com
Weitere technische Dokumente finden sich auf GitHub.

Weitere Hands-on-Informationen zu JavaScript

Microsoft hat eine Vielzahl weiterer Lernangebote zu Open Source JavaScript-Themen und im Rahmen der Entwicklung von Microsoft Edge werden weitere entstehen. Hier eine Auswahl:

· Introduction to WebGL 3D and HTML5 and Babylon.JS

· Cutting Edge Graphics in HTML

· Practical Performance Tips to Make your HTML/JavaScript Faster

· The Modern Web Platform JumpStart (Grundlagen von HTML, CSS und JS)

· Developing Universal Windows App with HTML and JavaScript JumpStart

Ein paar kostenfreie Tools: Visual Studio Community, Visual Studio Code und Cross-Browser Testing Tools für Mac, Linux oder Windows.

<<<>>>

Dieser Artikel ist Teil einer Webentwicklungsserie von Microsoft. Wir freuen uns darüber, Microsoft Edge und die neue EdgeHTML Rendering Engine mit euch zu teilen. Kostenfreie virtuelle Maschinen und Remote Testing-Möglichkeiten für Mac-, iOS-, Android- und Windows-Geräte gibt es über http://dev.modern.ie/

Über den Autor

David Catuhe ist Principal Program Manager bei Microsoft mit Fokus auf Webentwicklung. Er ist Autor des Babylon.js-Frameworks zur Entwicklung von 3D-Spielen mit HTML5 und WebGL. Er hat einen Blog auf MSDN und ist auf Twitter unter @deltakosh zu finden.

Comments (0)

Skip to main content