Share
Recent, la // BUILD / 2015 am anunțat Vorlon.js - un instrument open source, extensibil, platformă-agnostic pentru depanarea și testarea de la distanță a JavaScript. Am avut oportunitatea de a crea Vorlon.js cu ajutorul unor ingineri talentați și a evangheliștilor tehnici de la Microsoft (aceiași băieți care ți-au adus Babylon.js).
Vorlon.js este alimentat de Node.js, Socket.IO și de cafea târziu-noapte. Aș dori să vă împărtășesc de ce am făcut-o și cum să o încorporăm în propriul flux de lucru de testare, precum și să împărtășim câteva detalii despre arta construirii unei biblioteci JavaScript ca aceasta.
Vorlon.js vă ajută să încărcați de la distanță, să inspectați, să testați și să depanați codul JavaScript care rulează pe orice dispozitiv cu un browser web. Fie că este vorba de o consolă de jocuri, un dispozitiv mobil sau chiar de un frigider conectat la IoT, puteți conecta de la distanță până la 50 de dispozitive și executa JavaScript în fiecare sau în toate.
Ideea este că echipele dev pot deasemenea să depaneze împreună - fiecare persoană poate scrie cod, iar rezultatele sunt vizibile pentru toți. Am avut un motto simplu în acest proiect: Nu există cod nativ, nici o dependență la un anumit browser, numai JavaScript, HTML și CSS rulează pe dispozitivele alese de dvs..
Vorlon.js în sine este un mic server web pe care îl puteți rula de pe mașina dvs. locală sau puteți instala pe un server pentru accesul echipei dvs. care servește tabloului de bord Vorlon.js (centrul de comandă) și comunică cu dispozitivele de la distanță.
Instalarea clientului Vorlon.js în site-ul web sau în aplicația dvs. este la fel de ușor ca adăugarea unei singure etichete de script. Este, de asemenea, extensibil, astfel încât devs poate scrie plug-in-uri care adaugă caracteristici atât pentru client, cât și pentru tabloul de bord, cum ar fi detectarea funcțiilor, logarea și urmărirea excepțiilor.
De ce numele? Există de fapt două motive. Primul este pentru că sunt doar nebun despre Babylon 5 (emisiunea TV). Bazându-se pe aceasta, al doilea motiv este că Vorlonii sunt una dintre cele mai înțelepte și mai vechi rase din univers și astfel sunt ajutați ca diplomați între rasele mai tinere. Ajutorul lor este ceea ce ne-a inspirat: pentru distribuitorii web, este încă prea greu să scriem JavaScript care funcționează în mod credibil în diferite dispozitive și browsere. Vorlon.js încearcă să facă ceva mai ușor.
Vorlon.js a fost proiectat astfel încât să puteți extinde ușor tabloul de bord și aplicația clientului scriind sau instalând pluginuri suplimentare. Puteți redimensiona sau adăuga ferestre suplimentare în tabloul de bord, care pot comunica bidirecțional cu aplicația client. Există trei plugin-uri pentru a începe cu:
Înregistrarea: fila consola va transmite consola de mesaje de la client la tabloul de bord pe care îl puteți utiliza pentru depanare. Orice s-au conectat console.log (), console.warn () sau console.error () va apărea în tabloul de bord. Ca Instrumentul F12 Dev DOM explorer, puteți vedea arborele DOM, selectați un nod (care va fi evidențiat pe dispozitiv și va actualiza sau adăuga proprietăți CSS noi).
Interactivitate: De asemenea, puteți interacționa cu pagina Web la distanță prin tastarea codului în intrare. Codul introdus va fi evaluat în contextul paginii.
Inspectorul DOM vă arată DOM-ul paginii Web la distanță. Puteți inspecta DOM, faceți clic pe noduri pentru a le evidenția în pagina web gazdă, iar dacă selectați unul, puteți vizualiza și modifica proprietățile CSS.
Fila Modernizr vă va arăta caracteristicile browserului acceptate, așa cum au fost raportate de Modernizr. Puteți utiliza aceasta pentru a determina ce caracteristici sunt disponibile. Acest lucru ar putea fi util în special pe dispozitive mobile neobișnuite sau pe jocuri cum ar fi consolele de jocuri.
Din linia de comandă a nodului, executați doar acest lucru:
$ npm i -g vorlon $ vorlon
Acum aveți un server care rulează pe localhost pe portul 1337. Pentru a avea acces la tabloul de bord, trebuie doar să navigați la http: // localhost: 1337 / dashboard / SESSIONID, unde SESIUNE ID este ID-ul pentru sesiunea curentă de tablou de bord. Acesta poate fi orice șir doriți.
Apoi trebuie să adăugați o singură referință în proiectul dvs. client:
Vă rugăm să rețineți că SESIUNE ID poate fi omisă și în acest caz va fi înlocuită automat cu "implicit".
Si asta e! Acum, clientul dvs. va trimite fără întârziere informații de depanare la tabloul de bord. Să aruncăm o privire la un exemplu folosind un site real.
Să folosim http://www.babylonjs.com/ pentru exemplul nostru. În primul rând, trebuie să lansez serverul meu (folosind nodul start.js în interiorul /Server pliant). Apoi, trebuie doar să adaug această linie la site-ul clientului meu:
Pentru că eu nu definesc a SESIUNE ID, Pot să mă duc la http: // localhost: 1337 / tabloul de bord. Tabloul de bord arată astfel:
Notă marginală: Browserul afișat mai sus este Microsoft Edge (cunoscut anterior ca Project Spartan), noul browser Microsoft pentru Windows 10. De asemenea, puteți testa aplicațiile web pentru el de la distanță pe dispozitivul dvs. Mac, iOS, Android sau Windows @ http: // dev .modern.ie /. Sau încercați și Vorlon.js.
Înapoi la aceasta: pot vedea mesaje de consolă, de exemplu, ceea ce este util atunci când depanesc Babylon.js pe dispozitive mobile (cum ar fi iOS, Android sau Windows Phone). Pot să dau clic pe orice nod din DOM Explorer pentru a obține informații despre proprietățile CSS:
Pe partea clientului, nodul selectat este evidențiat cu o margine roșie:
În plus, pot trece la Modernizr pentru a vedea capabilitățile dispozitivului meu specific:
În partea stângă, puteți vedea lista clienților conectați în prezent și puteți utiliza funcția Identificați un client pentru a afișa un număr pe fiecare dispozitiv conectat.
De la început, am vrut să fim siguri că Vorlon.js rămâne așa pentru dispozitive mobile mai întâi și platformă-agnostic pe cat posibil. Deci, am decis să folosim tehnologie open source care a funcționat în mai multe medii.
Mediul nostru dev a fost Visual Studio Community, pe care îl puteți obține gratuit acum. Am folosit instrumentele Node.js pentru Visual Studio și Azure pentru back-end. Partea frontală a fost JavaScript și TypeScript. Dacă nu sunteți familiarizați cu tipul de tipScript, puteți afla de ce am construit Babylon.js cu acesta în această postare pe blog. Recent, Angular 2 a fost construit cu TypeScript. Dar nu trebuie să știi să folosești Vorlon.js.
Iată o schemă globală a modului în care funcționează:
Iată părțile pe care le-am construit:
De exemplu, pluginul consolei funcționează astfel:
Accentsconagua
console.log (), console.warn () sau console.error (). Acest cârlig este utilizat pentru a trimite parametrii acestor funcții pe tabloul de bord. De asemenea, poate primi comenzi de la tabloul de bord pe care le va evalua.Rezultatul este pur și simplu o consolă la distanță:
Puteți obține o înțelegere și mai bună a extensibilității Vorlon.js, inclusiv a modului de a construi propriile plug-in-uri, pe site-ul Vorlon.js.
Vorlon.js este construit pe ideea de extensibilitate. Vă încurajăm să contribuiți! Și ne gândim deja la modul în care ar putea fi integrat Vorlon.js în instrumentele de browser de browser, precum și în depanarea Web Audio.
Dacă doriți să o încercați, sunteți la doar un clic distanță: vorlonjs.com. Și mai multe documente tehnice sunt pe GitHub-ul nostru.
S-ar putea să vă surprindă puțin, dar Microsoft are o grămadă de învățare gratuită pe multe subiecte JavaScript open source și suntem într-o misiune de a crea mult mai mult cu Microsoft Edge. Check out-ul meu:
Sau seria de învățare a echipei noastre:
Și câteva instrumente gratuite: Visual Studio Community, Azure Trial și instrumente de testare cross-browser pentru Mac, Linux sau Windows.
Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ http://dev.modern.ie/.
