Share
Vor kurzem auf der // BUILD / 2015 haben wir Vorlon.js vorgestellt - ein offenes, erweiterbares, plattformunabhängiges Open Source-Tool zum Remote-Debuggen und Testen Ihres JavaScript. Ich hatte die Gelegenheit, mit Hilfe einiger talentierter Ingenieure und Tech-Evangelisten bei Microsoft Vorlon.js zu erstellen (die gleichen Typen, die Ihnen Babylon.js gebracht haben)..
Vorlon.js wird von Node.js, Socket.IO und Late-Night-Kaffee betrieben. Ich möchte mit Ihnen teilen, warum wir es erstellt haben und wie Sie es in Ihren eigenen Test-Workflow integrieren können. Außerdem möchten wir Ihnen einige Details zur Konstruktion einer solchen JavaScript-Bibliothek mitteilen.
Vorlon.js unterstützt Sie beim Fernladen, Prüfen, Testen und Debuggen von JavaScript-Code, der auf einem beliebigen Gerät mit einem Webbrowser ausgeführt wird. Unabhängig davon, ob es sich um eine Spielekonsole, ein Mobilgerät oder sogar einen Kühlschrank mit IoT-Anschluss handelt, können Sie bis zu 50 Geräte aus der Ferne anschließen und in jedem oder allen davon JavaScript ausführen.
Die Idee hier ist, dass Entwickler-Teams auch gemeinsam debuggen können - jede Person kann Code schreiben, und die Ergebnisse sind für alle sichtbar. Wir hatten ein einfaches Motto in diesem Projekt: Kein nativer Code, keine Abhängigkeit zu einem bestimmten Browser, nur JavaScript, HTML und CSS auf den Geräten Ihrer Wahl.
Vorlon.js selbst ist ein kleiner Webserver, den Sie von Ihrem lokalen Computer aus ausführen oder auf einem Server installieren können, auf den Ihr Team zugreifen kann. Er dient dem Vorlon.js-Dashboard (Ihrem Command Center) und kommuniziert mit den Remote-Geräten.
Die Installation des Vorlon.js-Clients auf Ihrer Website oder App ist so einfach wie das Hinzufügen eines einzelnen Skript-Tags. Es ist auch erweiterbar, sodass Entwickler Plug-Ins schreiben können, die sowohl dem Client als auch dem Dashboard Funktionen hinzufügen, z. B. Featureerkennung, Protokollierung und Ausnahmeverfolgung.
Warum also der Name? Es gibt zwei Gründe. Die erste ist, weil ich einfach verrückt nach Babylon 5 (der TV-Serie) bin. Aus diesem Grund ist der zweite Grund, dass die Vorlonen eine der weisesten und ältesten Rassen im Universum sind und daher als Diplomaten zwischen jüngeren Rassen hilfreich sind. Ihre Hilfsbereitschaft hat uns inspiriert: Für Web-Entwickler ist es immer noch zu schwer, JavaScript zu schreiben, das zuverlässig in den verschiedenen Geräten und Browsern funktioniert. Vorlon.js soll es etwas einfacher machen.
Vorlon.js wurde so konzipiert, dass Sie das Dashboard und die Clientanwendung einfach erweitern können, indem Sie zusätzliche Plugins schreiben oder installieren. Sie können das Dashboard vergrößern oder verkleinern, um bidirektional mit der Clientanwendung zu kommunizieren. Zunächst gibt es drei Plug-Ins:
Protokollierung: Auf der Registerkarte "Konsole" werden Konsolennachrichten vom Client an das Dashboard übertragen, das Sie zum Debuggen verwenden können. Alles, was mit angemeldet ist console.log (), console.warn () oder console.error () erscheint im Dashboard. Wie F12 Dev Tool DOM-Explorer: Sie können die DOM-Struktur anzeigen, einen Knoten auswählen (der auf dem Gerät hervorgehoben wird, und die CSS-Eigenschaften aktualisieren oder neue hinzufügen)..
Interaktivität: Sie können auch mit der entfernten Webseite interagieren, indem Sie Code in die Eingabe eingeben. Der eingegebene Code wird im Kontext der Seite ausgewertet.
Der DOM-Inspector zeigt Ihnen das DOM der Remote-Webseite. Sie können das DOM überprüfen, indem Sie auf Knoten klicken, um sie auf der Host-Webseite hervorzuheben. Wenn Sie einen auswählen, können Sie auch dessen CSS-Eigenschaften anzeigen und ändern.
Auf der Registerkarte Modernizr werden die unterstützten Browserfunktionen angezeigt, die von Modernizr gemeldet wurden. Sie können dies verwenden, um zu bestimmen, welche Funktionen tatsächlich verfügbar sind. Dies kann besonders bei ungewöhnlichen mobilen Geräten oder Dingen wie Spielekonsolen hilfreich sein.
Führen Sie in Ihrer Knotenbefehlszeile Folgendes aus:
$ npm i -g vorlon $ vorlon
Jetzt haben Sie einen Server auf Ihrem localhost auf Port 1337. Um Zugriff auf das Dashboard zu erhalten, navigieren Sie einfach zu http: // localhost: 1337 / dashboard / SESSIONID, wo SESSION-ID ist die ID für die aktuelle Dashboard-Sitzung. Dies kann eine beliebige Zeichenfolge sein.
Sie müssen dann in Ihrem Kundenprojekt eine einzelne Referenz hinzufügen:
Bitte beachte, dass SESSION-ID kann weggelassen werden und in diesem Fall wird es automatisch durch "default" ersetzt.
Und das ist es! Jetzt sendet Ihr Client die Debug-Informationen nahtlos an Ihr Dashboard. Betrachten wir nun ein Beispiel mit einer echten Site.
Verwenden wir für unser Beispiel http://www.babylonjs.com/. Zuerst muss ich meinen Server starten (mit dem Knoten start.js im /Server Mappe). Dann muss ich nur diese Zeile zu meiner Kundenwebsite hinzufügen:
Denn ich definiere keine SESSION-ID, Ich kann einfach auf http: // localhost: 1337 / Dashboard gehen. Das Dashboard sieht folgendermaßen aus:
Randnotiz: Der oben gezeigte Browser ist Microsoft Edge (früher bekannt als Project Spartan), der neue Browser von Microsoft für Windows 10. Sie können Ihre Web-Apps auch auf Ihrem Mac, iOS, Android oder Windows-Gerät @ http: // dev remote testen .modern.de /. Oder versuchen Sie es auch mit Vorlon.js.
Back to it: Ich kann beispielsweise Konsolenmeldungen sehen, was nützlich ist, wenn ich Babylon.js auf mobilen Geräten (wie iOS, Android oder Windows Phone) debugge. Ich kann im DOM Explorer auf einen beliebigen Knoten klicken, um Informationen zu CSS-Eigenschaften zu erhalten:
Auf der Clientseite ist der ausgewählte Knoten mit einem roten Rahmen markiert:
Außerdem kann ich auf die wechseln Modernizr Registerkarte, um die Fähigkeiten meines spezifischen Geräts anzuzeigen:
Auf der linken Seite sehen Sie die Liste der aktuell verbundenen Clients und Sie können die verwenden Identifizieren Sie einen Kunden Taste, um eine Nummer auf jedem angeschlossenen Gerät anzuzeigen.
Wir wollten von Anfang an sicher sein, dass Vorlon.js so bleibt mobil zuerst und Plattform-Agnostiker wie möglich. Daher haben wir uns entschlossen, Open Source-Technologie einzusetzen, die in einer größeren Anzahl von Umgebungen funktioniert.
Unsere Entwicklerumgebung war die Visual Studio Community, die Sie jetzt kostenlos erhalten können. Wir haben die Node.js-Tools für Visual Studio und Azure für das Back-End verwendet. Unser Frontend war JavaScript und TypeScript. Wenn Sie mit TypeScript nicht vertraut sind, können Sie in diesem Blogbeitrag erfahren, warum wir Babylon.js damit erstellt haben. Kürzlich wurde Angular 2 mit TypeScript erstellt. Sie müssen es jedoch nicht wissen, um Vorlon.js verwenden zu können.
Hier ist ein globales Schema, wie es funktioniert:
Hier sind die Teile, mit denen wir es gebaut haben:
Beispielsweise funktioniert das Konsolen-Plugin folgendermaßen:
Accentsconagua
console.log (), console.warn () oder console.error (). Mit diesem Hook werden die Parameter dieser Funktionen an das Dashboard gesendet. Es kann auch Aufträge von der Dashboard-Seite erhalten, die es auswerten wird.Das Ergebnis ist einfach eine Remote-Konsole:
Auf der Vorlon.js-Website erhalten Sie ein noch besseres Verständnis der Erweiterbarkeit von Vorlon.js, einschließlich der Erstellung eigener Plug-Ins.
Vorlon.js basiert auf der Idee von Erweiterbarkeit. Wir ermutigen Sie, einen Beitrag zu leisten! Wir denken bereits darüber nach, wie wir Vorlon.js in Browser-Entwicklungstools sowie in das Web Audio-Debugging integrieren könnten.
Wenn Sie es ausprobieren möchten, sind Sie nur einen Klick entfernt: vorlonjs.com. Und die technischen Dokumente finden Sie auf unserem GitHub.
Es mag Sie ein wenig überraschen, aber Microsoft bietet eine Reihe von kostenlosen Informationen zu vielen Open Source-JavaScript-Themen. Wir haben uns vorgenommen, mit Microsoft Edge viel mehr zu schaffen. Schauen Sie sich meine eigenen an:
Oder die Lernreihe unseres Teams:
Und einige kostenlose Tools: Visual Studio Community, Azure Trial und Cross-Browser-Testtools für Mac, Linux oder Windows.
Dieser Artikel ist Teil der Web-Dev-Tech-Serie von Microsoft. Wir freuen uns zu teilen Microsoft Edge und das Neue EdgeHTML-Rendering-Engine mit dir. Erhalten Sie kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac, iOS, Android oder Windows-Gerät. http://dev.modern.ie/.
