Share
Nylig på // BUILD / 2015 annonserte vi Vorlon.js-et open source, utvidbart, plattform-agnostisk verktøy for ekstern feilsøking og testing av JavaScript. Jeg hadde muligheten til å skape Vorlon.js ved hjelp av noen talentfulle ingeniører og teknologiske evangelister ved Microsoft (de samme gutta som brakte deg Babylon.js).
Vorlon.js er drevet av Node.js, Socket.IO og sen-natt kaffe. Jeg vil gjerne dele med deg hvorfor vi gjorde det og hvordan å innlemme det i din egen testningsflyt, samt dele litt mer informasjon om kunsten å bygge et JavaScript-bibliotek som det.
Vorlon.js hjelper deg eksternt laste, inspisere, teste og feilsøke JavaScript-kode som kjører på en hvilken som helst enhet med en nettleser. Enten det er en spillkonsoll, mobilenhet eller til og med et IoT-tilkoblet kjøleskap, kan du eksternt koble til opptil 50 enheter og utføre JavaScript i hver eller alle av dem.
Ideen her er at dev-lagene også kan feilsøke sammen - hver person kan skrive kode, og resultatene er synlige for alle. Vi hadde et enkelt motto i dette prosjektet: Ingen innfødt kode, ingen avhengighet til en bestemt nettleser, bare JavaScript, HTML og CSS kjører på enhetene etter eget valg.
Vorlon.js selv er en liten webserver du kan kjøre fra din lokale maskin, eller installere på en server for ditt lag å få tilgang til, som serverer Vorlon.js-dashbordet (kommandosentralen) og kommuniserer med de eksterne enhetene.
Installering av Vorlon.js-klienten på ditt nettsted eller app er like enkelt som å legge til et enkelt skript-tag. Det er også utvidbart, slik at devs kan skrive plugin-moduler som legger til funksjoner for både klienten og instrumentbrettet, for eksempel funksjonalisering, logging og unntakssporing.
Så hvorfor navnet? Det er faktisk to grunner. Den første er fordi jeg bare er gal om Babylon 5 (TV-showet). Basert på dette er den andre grunnen fordi Vorlons er en av de klokeste og mest gamle raser i universet, og dermed er de nyttige som diplomater mellom yngre løp. Deres hjelpsomhet er det som inspirerte oss: for web-devs er det fremdeles bare for vanskelig å skrive JavaScript som fungerer pålitelig i de ulike enhetene og nettleserne. Vorlon.js søker å gjøre det litt enklere.
Vorlon.js er designet slik at du enkelt kan utvide instrumentbrettet og klientprogrammet ved å skrive eller installere flere plugins. Du kan endre størrelsen eller legge til ekstra ruter i dashbordet som kan kommunisere toveis med klientprogrammet. Det er tre plugin-moduler til å begynne med:
Logging: Konsollfanen vil streame konsollmeldinger fra klienten til dashbordet som du kan bruke til feilsøking. Noe logget med console.log (), console.warn () eller console.error () vises i dashbordet. Som F12 Dev Tool DOM Explorer, kan du se DOM-treet, velg en knutepunkt (som vil bli uthevet på enheten, og oppdatere eller legge til nye CSS-egenskaper).
Interaktivitet: Du kan også samhandle med den eksterne nettsiden ved å skrive inn kode i inngangen. Kode oppgitt vil bli vurdert i sammenheng med siden.
DOM inspektøren viser deg DOM på den eksterne nettsiden. Du kan inspisere DOM, klikke på noder for å markere dem på vertswebsiden, og hvis du velger en, kan du også vise og endre sine CSS egenskaper.
Fanebladet Modernizr viser deg de støttede nettleserfunksjonene som rapportert av Modernizr. Du kan bruke dette til å avgjøre hvilke funksjoner som faktisk er tilgjengelige. Dette kan være spesielt nyttig på uvanlige mobilenheter, eller ting som spillkonsoller.
Fra din kommandolinje knutepunkt, bare utfør dette:
$ npm i -g vorlon $ vorlon
Nå har du en server som kjører på ditt lokalehost på port 1337. For å få tilgang til dashbordet, bare navigere til http: // localhost: 1337 / dashboard / SESSIONID, hvor ØKTNUMMER er ID for den nåværende instrumentbrett økten. Dette kan være hvilken som helst streng du vil ha.
Du må da legge til en enkelt referanse i klientprosjektet ditt:
Vær oppmerksom på at ØKTNUMMER kan utelates og i dette tilfellet vil det automatisk bli erstattet av "standard".
Og det er det! Nå vil klienten sende feilsøkingsinformasjon til dashbordet ditt sømløst. La oss nå se på et eksempel ved å bruke et ekte nettsted.
La oss bruke http://www.babylonjs.com/ for vårt eksempel. Først må jeg starte serveren min (ved hjelp av node start.js inne i / server mappe). Da må jeg bare legge til denne linjen på klienten min:
Fordi jeg ikke definerer en ØKTNUMMER, Jeg kan bare gå til http: // localhost: 1337 / dashboard. Dashbordet ser slik ut:
sidenote: Nettleseren vist ovenfor er Microsoft Edge (tidligere kjent som Project Spartan), Microsofts nye nettleser for Windows 10. Du kan også teste webappene dine for det eksternt på Mac, iOS, Android eller Windows-enheten @ http: // dev .modern.ie /. Eller prøv Vorlon.js også.
Tilbake til det: Jeg kan se konsollmeldinger for eksempel, noe som er nyttig når jeg feilsøker Babylon.js på mobile enheter (som iOS, Android eller Windows Phone). Jeg kan klikke på en node på DOM Explorer for å få informasjon om CSS egenskaper:
På klientsiden utheves den valgte noden med en rød ramme:
Videre kan jeg bytte til Modernizr fanen for å se egenskapene til min bestemte enhet:
På venstre side kan du se listen over tilkoblede klienter, og du kan bruke Identifiser en klient knappen for å vise et nummer på hver tilkoblet enhet.
Fra begynnelsen ønsket vi å være sikker på at Vorlon.js forblir som mobil-først og plattform-agnostic som mulig. Så vi bestemte oss for å bruke åpen kildekode-teknologi som fungerte på tvers av det bredere antall miljøer.
Vårt dev miljø var Visual Studio Community som du kan få gratis nå. Vi brukte verktøyene Node.js for Visual Studio og Azure for back-end. Vår forside var JavaScript og TypeScript. Hvis du ikke er kjent med TypeScript, kan du lære hvorfor vi har bygget Babylon.js med det i dette blogginnlegget. Nylig Angular 2 er bygget med TypeScript. Men du trenger ikke å vite det for å bruke Vorlon.js.
Her er et globalt skjema for hvordan det fungerer:
Her er delene vi bygget den med:
For eksempel fungerer konsollpluggen på denne måten:
Accentsconagua
console.log (), console.warn () eller console.error (). Denne kroken brukes til å sende parametrene til disse funksjonene til instrumentbrettet. Det kan også motta ordre fra instrumentbransjen som den vil evaluere.Resultatet er ganske enkelt en fjernkonsoll:
Du kan få en enda bedre forståelse av Vorlon.js-utvidbarhet, inkludert hvordan du bygger dine egne plugin-moduler på Vorlon.js nettsted.
Vorlon.js er bygget på ideen om utvidelses. Vi oppfordrer deg til å bidra! Og vi tenker allerede på hvordan vi kan integrere Vorlon.js i nettleser-dev-verktøy samt web-feilsøking.
Hvis du vil prøve det, er du bare ett klikk unna: vorlonjs.com. Og de mer tekniske dokumentene er på vår GitHub.
Det kan kanskje overraske deg litt, men Microsoft har en mengde gratis læring på mange open source JavaScript-emner, og vi har et oppdrag å skape mye mer med Microsoft Edge. Sjekk ut min egen:
Eller vårt lags læringsserie:
Og noen gratis verktøy: Visual Studio Community, Azure Trial, og tverrbrowser testing verktøy for Mac, Linux eller Windows.
Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.
