Come eseguire il debug di JavaScript in remoto con Vorlon.js

Recentemente a // BUILD / 2015 abbiamo annunciato Vorlon.js, uno strumento open source, estensibile e indipendente dalla piattaforma per il debugging e il test del codice JavaScript. Ho avuto l'opportunità di creare Vorlon.js con l'aiuto di alcuni ingegneri di talento e di evangelisti tecnologici di Microsoft (gli stessi che ti hanno portato Babylon.js).

Vorlon.js è alimentato da Node.js, Socket.IO e caffè a tarda notte. Vorrei condividere con voi il motivo per cui lo abbiamo realizzato e come incorporarlo nel vostro flusso di lavoro di test, oltre a condividere alcuni dettagli sull'arte di costruire una libreria JavaScript come questa.

Perché Vorlon.js?

Vorlon.js ti aiuta a caricare, ispezionare, testare ed eseguire il debug in remoto del codice JavaScript in esecuzione su qualsiasi dispositivo con un browser web. Che si tratti di una console di gioco, di un dispositivo mobile o di un frigorifero collegato a IoT, puoi connettere da remoto fino a 50 dispositivi ed eseguire JavaScript in ognuno o in tutti. 

L'idea è che i team di sviluppo possono anche eseguire il debug insieme: ogni persona può scrivere codice e i risultati sono visibili a tutti. Abbiamo avuto un semplice motto in questo progetto: Nessun codice nativo, nessuna dipendenza ad un browser specifico, solo JavaScript, HTML e CSS in esecuzione sui dispositivi di tua scelta.

Vorlon.js è un piccolo server Web che puoi eseguire dal tuo computer locale, o installare su un server per il tuo team, che serve il dashboard di Vorlon.js (il tuo centro di comando) e comunica con i dispositivi remoti. 

L'installazione del client Vorlon.js nel tuo sito web o app è facile come aggiungere un singolo tag script. È anche estensibile, quindi gli sviluppatori possono scrivere plug-in che aggiungono funzionalità sia al client che al dashboard, come il rilevamento di funzionalità, la registrazione e il monitoraggio delle eccezioni.

Allora perché il nome? Ci sono in realtà due ragioni. Il primo è perché sono pazzo di Babylon 5 (lo show televisivo). Sulla base di questo, la seconda ragione è che i Vorlon sono una delle razze più saggi e antiche dell'universo e quindi sono utili come diplomatici tra le razze più giovani. La loro disponibilità è ciò che ci ha ispirato: per gli sviluppatori Web, è ancora troppo difficile scrivere JavaScript che funzioni in modo affidabile nei vari dispositivi e browser. Vorlon.js cerca di renderlo un po 'più semplice.

Hai citato Vorlon.js Ha i plug-in?

Vorlon.js è stato progettato in modo da poter estendere facilmente la dashboard e l'applicazione client scrivendo o installando plugin aggiuntivi. È possibile ridimensionare o aggiungere riquadri aggiuntivi al dashboard che possono comunicare in modo bidirezionale con l'applicazione client. Sono disponibili tre plug-in per iniziare:

consolle

Registrazione: la scheda della console trasmetterà i messaggi della console dal client alla dashboard che è possibile utilizzare per il debug. Qualche cosa registrato con console.log (), console.warn () o Console.Error () apparirà nella dashboard. Come il F12 Dev Tool DOM explorer, puoi vedere l'albero DOM, selezionare un nodo (che sarà evidenziato sul dispositivo e aggiornare o aggiungere nuove proprietà CSS).

Interattività: puoi anche interagire con la pagina Web remota digitando il codice nell'input. Il codice inserito sarà valutato nel contesto della pagina.

DOM Explorer

L'ispettore DOM ti mostra il DOM della pagina web remota. Puoi ispezionare il DOM, fare clic sui nodi per evidenziarli nella pagina web dell'host e se ne selezioni uno puoi anche visualizzare e modificare le sue proprietà CSS.

Modernizr

La scheda Modernizr ti mostrerà le funzioni del browser supportate come riportato da Modernizr. È possibile utilizzare questo per determinare quali funzionalità sono effettivamente disponibili. Questo potrebbe essere particolarmente utile su dispositivi mobili insoliti o cose come le console di gioco.

Come lo uso?

Dalla riga di comando del tuo nodo, esegui questo:

$ npm i -g vorlon $ vorlon

Ora hai un server in esecuzione sul tuo localhost sulla porta 1337. Per accedere al dashboard, vai a http: // localhost: 1337 / dashboard / SESSIONID, dove SESSIONID è l'id per la sessione attuale del pannello di controllo. Questa può essere qualsiasi stringa tu voglia.

Devi quindi aggiungere un singolo riferimento nel tuo progetto client:

Si prega di notare che SESSIONID può essere omesso e in questo caso verrà automaticamente sostituito da "default". 

E questo è tutto! Ora il tuo cliente invierà senza problemi le informazioni di debug alla tua dashboard. Diamo ora un'occhiata a un esempio usando un sito reale. 

Eseguire il debug di Babylonjs.com utilizzando Vorlon.js

Usiamo http://www.babylonjs.com/ per il nostro esempio. Per prima cosa, devo avviare il mio server (usando il nodo start.js all'interno di /server cartella). Quindi, devo solo aggiungere questa linea al mio sito client:

 

Perché non sto definendo a SESSIONID, Posso solo andare a http: // localhost: 1337 / dashboard. La dashboard ha questo aspetto:

Nota a margine: Il browser mostrato sopra è Microsoft Edge (precedentemente noto come Project Spartan), il nuovo browser Microsoft per Windows 10. Puoi anche testare le tue app Web da remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http: // dev .modern.ie /. Oppure prova anche Vorlon.js.

Torna ad esso: posso vedere i messaggi della console, ad esempio, che è utile quando eseguo il debug di Babylon.js su dispositivi mobili (come iOS, Android o Windows Phone). Posso fare clic su qualsiasi nodo su DOM Explorer per ottenere informazioni sulle proprietà CSS:

 Sul lato client, il nodo selezionato è evidenziato con un bordo rosso:

Inoltre, posso passare a Modernizr scheda per vedere le funzionalità del mio dispositivo specifico:

Sul lato sinistro, è possibile visualizzare l'elenco dei client attualmente connessi ed è possibile utilizzare il Identifica un cliente pulsante per visualizzare un numero su ogni dispositivo connesso.

Un po 'di più su come abbiamo costruito Vorlon.js

Sin dall'inizio, volevamo essere sicuri che Vorlon.js rimanesse come mobili-prima e indipendente dalla piattaforma il più possibile Quindi abbiamo deciso di utilizzare la tecnologia open source che ha funzionato attraverso il più ampio numero di ambienti.

Il nostro ambiente di sviluppo era Visual Studio Community che ora puoi ottenere gratuitamente. Abbiamo utilizzato gli strumenti Node.js per Visual Studio e Azure per il back-end. Il nostro front-end era JavaScript e TypeScript. Se non hai familiarità con TypeScript, puoi imparare perché abbiamo creato Babylon.js con esso in questo post del blog. Recentemente Angular 2 è stato realizzato con TypeScript. Ma non devi saperlo per usare Vorlon.js.

Ecco uno schema globale di come funziona:

 Ecco le parti con le quali è stato realizzato:

  • Un server Node.js ospita una pagina dashboard (servita con Express) e un servizio.
  • Il servizio utilizza Socket.IO per stabilire una connessione diretta sia con la dashboard che con i vari dispositivi.
  • I dispositivi devono fare riferimento a una semplice pagina Vorlon.js servita dal server. Contiene il codice client di tutti i plug-in che interagisce con il dispositivo client e comunica con il dashboard attraverso il server.
  • Ogni plug-in è diviso in due parti:
    • il lato client, utilizzato per acquisire informazioni e interagire con il dispositivo
    • il lato dashboard, utilizzato per generare un pannello comandi per il plug-in all'interno della dashboard

Ad esempio, il plugin per la console funziona in questo modo:

  • Il lato client genera un gancio sopra console.log (), console.warn () o Console.Error (). Questo hook viene utilizzato per inviare i parametri di queste funzioni alla dashboard. Può anche ricevere ordini dal lato cruscotto che valuterà.
  • Il lato cruscotto raccoglie questi parametri e li visualizza sul cruscotto.

Il risultato è semplicemente una console remota:

Puoi ottenere una migliore comprensione dell'estensibilità di Vorlon.js, incluso come creare i tuoi plug-in, sul sito web Vorlon.js.

Qual'è il prossimo?

Vorlon.js è costruito sull'idea di estensibilità. Ti incoraggiamo a contribuire! E stiamo già pensando a come integrare Vorlon.js negli strumenti di sviluppo del browser e nel debug di Web Audio.

Se vuoi provarlo, sei a un solo clic di distanza: vorlonjs.com. E i documenti più tecnici sono sul nostro GitHub.

Più mani con JavaScript

Potrebbe sorprendervi un po ', ma Microsoft ha un sacco di apprendimento gratuito su molti argomenti JavaScript open source, e siamo in missione per creare molto di più con Microsoft Edge. Controlla il mio:

  • Introduzione a WebGL 3D con HTML5 e Babylon.JS
  • Creazione di un'applicazione a pagina singola con ASP.NET e AngularJS
  • Grafica all'avanguardia in HTML

Oppure le serie di apprendimento del nostro team:

  • Suggerimenti pratici sulle prestazioni per rendere il tuo HTML / JavaScript più veloce (una serie in sette parti dal design reattivo ai giochi casuali all'ottimizzazione delle prestazioni)
  • La piattaforma Web moderna Jump Start (i fondamenti di HTML, CSS e JS)
  • Sviluppo di un'applicazione Windows universale con HTML e JavaScript Jump Start (usa il JS che hai già creato per creare un'app)

E alcuni strumenti gratuiti: Visual Studio Community, Azure Trial e strumenti di test cross-browser per Mac, Linux o Windows.

Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.