Share
Nyligen på // BUILD / 2015 meddelade vi Vorlon.js-ett open source, utökbart, plattforms-agnostiskt verktyg för fjärrfelsökning och testning av JavaScript. Jag hade möjlighet att skapa Vorlon.js med hjälp av några begåvade ingenjörer och tekniska evangelister hos Microsoft (samma killar som tog dig med Babylon.js).
Vorlon.js drivs av Node.js, Socket.IO och late night coffee. Jag skulle vilja dela med dig varför vi gjorde det och hur det skulle integreras i ditt eget testningsflöde, liksom att dela lite mer information om konsten att bygga ett JavaScript-bibliotek som det.
Vorlon.js hjälper dig att ladda, inspektera, testa och felsöka JavaScript-kod som körs på vilken enhet som helst med en webbläsare. Oavsett om det är en spelkonsol, mobilenhet eller till och med ett IoT-anslutet kylskåp, kan du fjärr ansluta upp till 50 enheter och utföra JavaScript i varje eller alla av dem.
Tanken här är att dev teams kan också felsöka tillsammans - varje person kan skriva kod, och resultaten är synliga för alla. Vi hade ett enkelt motto i det här projektet: Ingen inbyggd kod, inget beroende till en viss webbläsare, bara JavaScript, HTML och CSS körs på de enheter som du väljer.
Vorlon.js själv är en liten webbserver som du kan köra från din lokala dator, eller installera på en server för ditt lag att komma åt, som serverar kontrollpanelen Vorlon.js (ditt kommandocentrum) och kommunicerar med fjärranslutna enheter.
Installera Vorlon.js-klienten på din webbplats eller app är lika enkelt som att lägga till en enda skript tagg. Det är också utökbart, så devs kan skriva plugin-moduler som lägger till funktioner för både klienten och instrumentbrädan, som funktion av detektering, loggning och undantagsspårning.
Så varför namnet? Det finns faktiskt två skäl. Den första är för att jag bara är galen om Babylon 5 (TV-showen). Baserat på detta är den andra orsaken till att Vorlonsna är en av de klokaste och antika raserna i universum och därmed är de till hjälp som diplomater mellan yngre raser. Deras hjälpsamhet är det som inspirerade oss: för webbutvecklingar är det fortfarande alltför svårt att skriva JavaScript som fungerar pålitligt i olika enheter och webbläsare. Vorlon.js försöker göra det bara lite enklare.
Vorlon.js har utformats så att du enkelt kan utöka instrumentpanelen och klientprogrammet genom att skriva eller installera ytterligare plugins. Du kan ändra storlek eller lägga till extra rutor på instrumentpanelen som kan kommunicera dubbelriktat med klientprogrammet. Det finns tre plugin-moduler till att börja med:
Logging: Konsol fliken kommer att strömma konsolmeddelanden från klienten till instrumentpanelen som du kan använda för debugging. Allt som loggats med console.log (), console.warn () eller console.error () kommer att visas i instrumentpanelen. Som F12 Dev Tool DOM-explorer, kan du se DOM-trädet, välj en nod (som kommer att markeras på enheten och uppdatera eller lägga till nya CSS-egenskaper).
Interaktivitet: Du kan också interagera med fjärrsidan genom att skriva in koden i inmatningen. Kod som anges kommer att utvärderas i sammanhanget av sidan.
DOM inspektören visar DOM på fjärrsidan. Du kan inspektera DOM, klicka på noder för att markera dem på värdwebbsidan och om du väljer en kan du även visa och ändra dess CSS-egenskaper.
Fönstret Modernizr visar de stödda webbläsarfunktionerna som rapporterats av Modernizr. Du kan använda detta för att bestämma vilka funktioner som faktiskt är tillgängliga. Det här kan vara särskilt användbart på ovanliga mobila enheter, eller saker som spelkonsoler.
Från din nodkommandon, kör bara detta:
$ npm i -g vorlon $ vorlon
Nu har du en server som körs på ditt lokala värd på port 1337. För att få åtkomst till instrumentpanelen, navigera bara till http: // localhost: 1337 / instrumentpanel / SESSIONID, där sessionid är id för den aktuella instrumentbrädssessionen. Detta kan vara vilken sträng du vill ha.
Du måste då lägga till en enda referens i ditt klientprojekt:
Vänligen notera att sessionid kan utelämnas och i så fall kommer det automatiskt att ersättas med "standard".
Och det är allt! Nu skickar din klient sömlös information till din instrumentbräda. Låt oss nu titta på ett exempel med en riktig webbplats.
Låt oss använda http://www.babylonjs.com/ för vårt exempel. Först måste jag starta min server (med node start.js inuti / server mapp). Sedan måste jag bara lägga till den här raden på min klientwebbplats:
Eftersom jag inte definierar en sessionid, Jag kan bara gå till http: // localhost: 1337 / instrumentbräda. Instrumentpanelen ser ut så här:
Sidonotis: Webbplatsen som visas ovan är Microsoft Edge (tidigare känd som Project Spartan), Microsofts nya webbläsare för Windows 10. Du kan också testa dina webbappar för den på din Mac, iOS, Android eller Windows-enheten .modern.ie /. Eller prova Vorlon.js också.
Tillbaka till det: Jag kan se konsolmeddelanden till exempel, vilket är användbart när jag debuggar Babylon.js på mobila enheter (som iOS, Android eller Windows Phone). Jag kan klicka på vilken nod som helst på DOM Explorer för att få information om CSS-egenskaper:
På klientsidan markeras den valda noden med en röd kant:
Dessutom kan jag byta till Modernizr fliken för att se egenskaperna hos min specifika enhet:
På vänster sida kan du se listan över befintliga kunder och du kan använda Identifiera en klient knappen för att visa ett nummer på varje ansluten enhet.
Från och med början ville vi vara säkra på att Vorlon.js förblir som mobil-första och plattform-agnostic som möjligt. Så vi bestämde oss för att använda öppen källteknik som fungerade över det bredare antalet miljöer.
Vår dev miljö var Visual Studio Community som du kan få gratis nu. Vi använde verktygen Node.js för Visual Studio och Azure för back-end. Vår front-end var JavaScript och TypeScript. Om du inte är bekant med TypeScript kan du lära dig varför vi har byggt Babylon.js med det i det här blogginlägget. Nyligen Angular 2 har byggts med TypeScript. Men du behöver inte veta det för att använda Vorlon.js.
Här är ett globalt schema över hur det fungerar:
Här är de delar vi byggt det med:
Konsollinställningen fungerar till exempel på följande sätt:
Accentsconagua
console.log (), console.warn () eller console.error (). Denna krok används för att skicka parametrarna för dessa funktioner till instrumentpanelen. Det kan också få order från instrumentbrädans sida att det kommer att utvärdera.Resultatet är helt enkelt en fjärrkonsol:
Du kan få en ännu bättre förståelse av Vorlon.js extensibility, inklusive hur man bygger egna plugin-program på Vorlon.js webbplats.
Vorlon.js bygger på idén om sträckbarhet. Vi uppmuntrar dig att bidra! Och vi tänker redan på hur vi kan integrera Vorlon.js i webbläsares devverktyg samt Web Audio debugging.
Om du vill prova är du bara ett klick bort: vorlonjs.com. Och de mer tekniska dokumenten finns på vår GitHub.
Det kan kanske överraska dig lite, men Microsoft har en massa gratis lärande på många JavaScript-ämnen med öppen källkod, och vi är på uppdrag att skapa mycket mer med Microsoft Edge. Kolla in min egen:
Eller vårt lags inlärningsserie:
Och några gratis verktyg: Visual Studio Community, Azure Trial och testverktyg för webbläsare för Mac, Linux eller Windows.
Den här artikeln är en del av web dev-tekniken från Microsoft. Vi är glada att dela Microsoft Edge och den nya EdgeHTML-återgivningsmotor med dig. Få gratis virtuella maskiner eller testa fjärran på din Mac, iOS, Android eller Windows-enheten @ http://dev.modern.ie/.
