Share
Som en JavaScript-utvecklare är jag säker på att du redan har fallit i det här scenariot: något går fel med produktionsversionen av din kod och felsökning direkt från produktionsservern är en mardröm, helt enkelt för att den har blivit minifierad eller har blivit sammanställd från ett annat språk som TypeScript eller CoffeeScript.
De goda nyheterna? De senaste versionerna av webbläsare kan hjälpa dig att lösa detta problem genom att använda källkartor. I den här handledningen visar jag dig hur man hittar källkartor i alla webbläsare och få ut det mesta av de få minuter du behöver felsöka.
Enligt den stora introduktionen till JavaScript Source Maps-artikeln är en källkarta "ett sätt att kartlägga en kombinerad / minifierad fil tillbaka till ett opbyggt tillstånd. När du bygger för produktion, tillsammans med att minifiera och kombinera dina JavaScript-filer genererar du en källkarta som innehåller information om dina ursprungliga filer”.
Tveka inte att läsa Ryan Seddons artikel först, eftersom det går bra information om hur en källkarta fungerar. Då lär du dig att en källkarta använder en mellanliggande fil som matchar produktionen av din kod och dess ursprungliga utvecklingsstatus. Formatet för den här filen beskrivs här: Källkarta Revision 3 Förslag.
Nu för att illustrera, kommer jag att dela hur vi arbetar för närvarande medan vi utvecklar vår WebGLBabylon.js öppen källkod. Det är skrivet in MASKINSKRIVEN. Men principerna kommer att förbli desamma om du använder vanliga JavaScript-komprimerade / minifierade eller andra språk som CoffeeScript.
Låt oss nu spela med källkartans magi direkt i webbläsarna.
Nyligen har jag implementerat stödet från Gamepad API i vår spelmotor. Låt oss använda sin kod för denna handledning.
I den här artikeln använder jag följande webbläsare:
Navigera till den här URL: http://david.blob.core.windows.net/babylonjs/gamepad/index.html och du får den här sidan:
Anslut en Xbox 360 eller Xbox One-kontroller i maskinens USB-port. tryck på en knappen för att aktivera gamepad och spela med den:
Men oroa dig inte, du behöver inte en gamepad controller för att följa denna handledning.
Notera: TypScript-kompilatorn genererar automatiskt källkartan för dig. Om du vill skapa en källkarta när du genererar din minifierade version av din kod, rekommenderar jag att du använder UglifyJS2.
För denna artikel blandade jag till och med båda. Jag har minifierat JS genererad av TypeScript och behöll källkartläggningen intakt med den här kommandoraden:
uglifyjs testgamepad.js -o testgamepad.min.js - källkarta testgamepad.min.js.map - i källkarta testgamepad.js.map
När testsidan för GamePad har laddats trycker du på F12 i IE11.
Du ser att HTML-källan refererar till två JavaScript-filer: babylon.gamepads.js i början av sidan och testgamepad.min.js i slutet. Den första filen kommer från vår ram på GitHub, och den andra är ett enkelt exempel som visar hur man konsumerar det.
Tryck på debugger knappen (eller Kontroll-3) och tryck sedan på mappikonen.
Du ser att IE11 erbjuder två filer att felsöka: babylon.gamepads.ts och testgamepad.min.js.
Låt oss börja med att granska babylon.gamepads.ts fall. Varför visar IE det istället för .js-versionen som körs av webbläsaren?
Detta beror på källkartsmekanismen. I slutet av babylon.gamepads.js fil, kan du hitta den här specifika raden:
// # sourceMappingURL = babylon.gamepads.js.map
Öppna babylon.gamepads.js.map för att förstå hur det fungerar:
"version": 3, "file": "babylon.gamepads.js", "sourceRoot": "", "källor": ["babylon.gamepads.ts"], "namn": ["BABYLON" BABYLON.Gamepads ", ...]
Genom att läsa denna JSON-fil vet IE11 att den ska kartlägga "babylon.gamepads.ts"Till"babylon.gamepads.js”. Det är därför som det direkt erbjuder att felsöka TypScript-källan istället för den sammanställda JS-versionen.
Öppna babylon.gamepad.ts i IE11 F12-konsolen och du får se något du kanske aldrig sett tidigare, något typScript-språk:
Du kan felsöka det eftersom du brukar felsöka din JS-kod, även om det är den kompilerade JavaScript-versionen som för närvarande exekveras av webbläsaren.
Ställ in en brytpunkt på rad 17 och tryck på F5 i webbläsarfönstret. Du kommer att kunna felsöka TypScript-versionen av konstruktören:
Gå upp till linje 20, mus över detta och expandera det för att kontrollera det gamepadEventSupported är satt till Sann:
Ladda samma sida: http://david.blob.core.windows.net/babylonjs/gamepad/index.html och tryck på F12 i Chrome eller Ctrl-Shift-I i opera.
Klicka på konfigurationsikonen och se till att Aktivera JavaScript-källkartor alternativet är aktiverat. Den bör vara som standard:
Chrome och Opera låter dig granska det körda babylon.gamepads.js kod, men om du försöker ställa in en brytpunkt i JavaScript-versionen kommer den inte att visa den. Den ställer den istället i källkoden som är mappad till den här versionen: babylon.gamepads.ts.
Försök till exempel ställa in en brytpunkt på rad 18 i babylon.gamepads.js JavaScript-filen och du ser att den kommer att ställas in på rad 17 i babylon.gamepads.ts TypScript-fil istället:
Naturligtvis kan du också ställa in lämpliga brytpunkter direkt i TypScript-källan som sett med IE11 strax innan.
Tryck F5 i webbläsarfönstret värd vår demosida och du kan nu felsöka min TypeScript-kod. Steg upp till linje 20 och mus över this.gamepadEventSupported variabel. Det borde visa Sann:
Ladda samma sida: http://david.blob.core.windows.net/babylonjs/gamepad/index.html och tryck på Kontroll-skift-S för att öppna den inbyggda debuggeren (använd inte F12 / Firebug, eftersom den inte stöder källkartor).
Kontrollera att Visa originalkällor alternativet är markerat:
Ställ in en brytpunkt som vanligt på rad 17 och ladda om sidan för att bryta in i koden. Firefox stöder inte muspekaren på den ursprungliga källan. Steg upp till linje 20 och expandera detta Objekt istället i den högra panelen för att kontrollera det gamepadEventSupported är satt till true också.
Hittills har vi kunnat felsöka babylon.gamepads.js kod med hjälp av babylon.gamepads.ts källa. Men vad sägs om detta minifierade testgamepad.min.js JavaScript-fil?
Den första lösningen är att prettify koden. Det fungerar med IE11, Chrome, Opera och Firefox.
I IE11, tryck på Pretty print knappen eller tryck på Ctrl-Shift-P:
I Krom / opera, tryck på knapp:
I Firefox, tryck också på knapp:
Detta är mycket bättre, men fortfarande inte så bra som det var med källkortsuppsättningen. För att kunna gå ett steg längre, lade vi till en ny funktion i augusti 2014 uppdatering av IE11. Du kan ladda en källkarta även om du har tagit bort den från .js-filen.
Tänk dig att du skulle vilja hindra någon från att enkelt felsöka produktionskoden för din webbapp med källkarta, men vill du ändå göra det? Ta bara bort sourceMappingURL linje från din .js-fil.
Med Internet Explorer 11 kan du fortfarande använda källkartan genom att ladda upp din lokala .Karta och tillhörande källkod. För det, högerklicka på testgamepad.min.js fliken och tryck på Välj källkarta:
Hämta dem här: http://david.blob.core.windows.net/babylonjs/gamepad/testgamepad.zip.
Unzip det i din föredragna katalog och navigera till den för att välja rätt .Karta fil:
Och nu kan den ursprungliga källkoden avföras igen:
Observera att fliken har blivit bytt namn till testgamepad.ts och att de första variablerna nu skrivs som vi visar vissa TypeScript.
Coolt, är det inte?
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/.
Lär dig JavaScript: Den fullständiga guiden
Vi har byggt en komplett guide för att hjälpa dig att lära dig JavaScript, oavsett om du precis börjat som webbutvecklare eller vill utforska mer avancerade ämnen.
Accentsconagua