Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Remote-Debugging am eigenen JavaScript durchführen: So geht es mit Vorlon.JS

    Remote-Debugging am eigenen JavaScript durchführen: So geht es mit Vorlon.JS

Für Webentwickler ist es immer noch schwer, JavaScript zu schreiben, das zuverlässig auf verschiedenen Geräten und Browsern funktioniert. Vorlon.js möchte das ein wenig einfacher machen. Wie man es nutzt, um Remote-Debugging des eigenen JavaScript durchzuführen, lest ihr im Artikel.

Auf der //BUILD/ 2015 hat Microsoft Vorlon.JS vorgestellt – ein erweiterbares, plattformunabhängiges Open-Source-Tool, das 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, die auch für die Entwicklung von www.babylonjs.com verantwortlich sind, in einem internationalen Team-Projekt entwickelt.

Vorlon.js ist mithilfe von node.JS, socket.io und einer Menge Kaffee entstanden. In diesem Artikel erfahrt ihr die Hintergründe zu seiner Entwicklung und wie man es in seinen eigenen Testablauf integriert – zudem werden ein paar Einblicke in die Entwicklung einer solchen JS-Bibliothek gegeben.

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 Spielekonsole, 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, das auf einem Gerät der Wahl ausgeführt wird.

Es ist für Webentwickler immer noch zu schwer, JavaScript zu schreiben, das zuverlässig auf verschiedenen Geräten und Browsern funktioniert.

Vorlon.js 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 die Vorlons eines der weisesten und ältesten Völker im Universum und damit wichtige Hilfe bei der Vermittlung zwischen jüngeren Völkern sind. Ihre Hilfsbereitschaft hat die Entwickler inspiriert: für Webentwickler ist es immer noch zu schwer, JavaScript zu schreiben, welches zuverlässig auf verschiedenen 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 man das Dashboard und die Client-Applikation einfach durch die Entwicklung und Installation zusätzlicher Plug-Ins erweitern kann. Man kann 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: Man kann außerdem mit einer entfernten Webseite interagieren, indem man etwas in das Eingabefeld eingibt. Eingegebener Code wird im Kontext der Client-Website interpretiert.

Vorlon js javascript remote debugging 1

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.

Vorlon js javascript remote debugging 2

Modernizr

Der Modernizr-Bereich zeigt unterstützte Browser-Funktionen an. Diese werden mithilfe von Modernizr ermittelt. Auf diese Weise kann man 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.

Modernizr

Wie verwende ich es?

Von der Node-Command-Line führt man einfach folgendes aus:

$ npm i -g vorlon
$ vorlon

Jetzt hat man einen laufenden Server auf seinem localhost und Port 1337. Um auf das Dashboard zuzugreifen, geht man im 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 auch schon. Ab jetzt wird der Client Debug-Informationen nahtlos an das Dashboard senden. So sieht das Ganze am Beispiel einer echten Website aus.

Debugging von babylonjs.com mit Vorlon.JS

Die Webseite www.babylonjs.com soll hier als Beispiel dienen. Zunächst muss man den Server starten (mit dem Kommando „vorlon“ bei globaler Installation). Als nächstes muss lediglich noch diese Zeile zum Client hinzugefügt werden:

<script src="http://localhost:1337/vorlon.js"></script>
Da keine SESSIONID definiert wurde, kann man direkt auf http://localhost:1337/dashboard gehen. Das Dashboard sieht dann so aus:

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

Man kann nun die Konsolenausgabe sehen, was insbesondere dann nützlich ist, wenn Babylon.JS auf einem mobilen Endgerät wie Andoid, Windows Phone oder iOS debuggt wird. Man kann nun zudem einen beliebigen Knoten im DOM-Explorer auswählen und erhält Informationen über die CSS-Eigenschaften:

Vorlon js 3

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

Vorlon js 4

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

Vorlon js 5

Auf der linken Seite sieht man eine Liste der verbundenen Clients und kann 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 sollte sichergestellt werden, dass Vorlon.JS soweit wie möglich Plattform-agnostisch und Mobile-First ist. Aus diesem Grund wurde entschieden, Open Source-Technologie zu verwenden, die in einer Vielzahl von Umgebungen funktioniert.

Die 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. Das Frontend basiert auf JavaScript und TypeScript. Diejenigen, die mit TypeScript noch nicht vertraut sind, können hier erfahren, warum Babylon.JS damit entwickelt wure. Für die Verwendung von Vorlon.JS sind TypeScript-Kenntnisse jedoch nicht erforderlich.

Hier noch ein Schema, wie die verschiedenen Komponenten zusammenspielen:

Vorlon js architektur

Auf dieser Seite 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. Fühlt Euch daher ermutigt, mit zu machen. Das Entwicklerteam ist selber gerade 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

Der Autor dieses Artikels ist David Catuhe

Finde einen Job, den du liebst

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen