Share
Als JavaScript-ontwikkelaar ben ik er zeker van dat je al in dit scenario bent geraakt: er gaat iets mis met de productieversie van je code en het debuggen van het direct van de productieserver is een nachtmerrie, simpelweg omdat het is verkleind of is gecompileerd vanuit een andere taal, zoals TypeScript of CoffeeScript.
Het goede nieuws? De nieuwste versies van browsers kunnen u helpen dit probleem op te lossen door bronkaarten te gebruiken. In deze zelfstudie laat ik je zien hoe je bronkaarten in alle browsers kunt vinden en het meeste kunt halen uit die paar minuten die je moet debuggen.
Volgens het grote artikel Introduction to JavaScript Source Maps is een bronkaart "een manier om een gecombineerd / verkleind bestand terug te brengen naar een onbewerkte staat. Wanneer u bouwt voor productie, samen met het verkleinen en combineren van uw JavaScript-bestanden, genereert u een bronkaart met informatie over uw originele bestanden”.
Aarzel niet om Ryan Seddon's artikel eerst te lezen, want het gaat in grote details over hoe een bronkaart werkt. U leert dan dat een bronkaart een tussenliggend bestand gebruikt dat de overeenstemming tussen de productieversie van uw code en de oorspronkelijke ontwikkelingsstatus doet. De indeling van dit bestand wordt hier beschreven: Bronkaart Revisie 3 Voorstel.
Om dit te illustreren, ga ik de manier waarop we momenteel werken delen tijdens het ontwikkelen van ons WebGLBabylon.js open-source framework. Het is erin geschreven getypte tekst. Maar de principes blijven hetzelfde als u eenvoudige JavaScript gecomprimeerde / verkleinde of andere talen gebruikt, zoals CoffeeScript.
Laten we nu met de bronkaartmagie spelen in de browsers.
Onlangs heb ik de ondersteuning van de Gamepad-API geïmplementeerd in onze game-engine. Laten we de code gebruiken voor deze zelfstudie.
In dit artikel gebruik ik de volgende browsers:
Navigeer naar deze URL: http://david.blob.core.windows.net/babylonjs/gamepad/index.html en u krijgt deze pagina:
Sluit een Xbox 360- of Xbox One-controller aan op de USB-poort van uw machine. druk de EEN om de gamepad te activeren en ermee te spelen:
Maar maak je geen zorgen, je hebt geen gamepad-controller nodig om deze tutorial te volgen.
Notitie: De TypeScript-compiler genereert automatisch de bronkaart voor u. Als u een bronkaart wilt genereren terwijl u uw verkleinde versie van uw code genereert, zou ik UglifyJS2 aanraden.
Voor dit artikel heb ik zelfs beide gemengd. Ik heb de JS gegenereerd door TypeScript geminimaliseerd en heb de brontoewijzing intact gehouden met behulp van deze opdrachtregel:
uglifyjs testgamepad.js -o testgamepad.min.js - resource-map testgamepad.min.js.map --in-source-map testgamepad.js.map
Zodra de GamePad-testpagina is geladen, drukt u op F12 in IE11.
U zult zien dat de HTML-bron verwijst naar twee JavaScript-bestanden: babylon.gamepads.js aan het begin van de pagina en testgamepad.min.js helemaal op het einde. Het eerste bestand komt van ons framework op GitHub, en het tweede is een eenvoudig voorbeeld dat laat zien hoe het te gebruiken.
Druk op de Debugger knop (of Controle-3) en druk vervolgens op het mappictogram.
U zult zien dat IE11 twee bestanden biedt om te debuggen: babylon.gamepads.ts en testgamepad.min.js.
Laten we beginnen met het bekijken van de babylon.gamepads.ts geval. Waarom laat IE het zien in plaats van de .js-versie die wordt uitgevoerd door de browser?
Dit is te danken aan het bronkaartmechanisme. Aan het einde van de babylon.gamepads.js bestand, kunt u deze specifieke regel vinden:
// # sourceMappingURL = babylon.gamepads.js.map
Open babylon.gamepads.js.map om te begrijpen hoe het werkt:
"version": 3, "file": "babylon.gamepads.js", "sourceRoot": "", "sources": ["babylon.gamepads.ts"], "names": ["BABYLON", " BABYLON.Gamepads ", ...]
Door dit JSON-bestand te lezen, weet IE11 dat het in kaart moet worden gebracht "babylon.gamepads.ts" naar "babylon.gamepads.js”. Dat is waarom het direct biedt om de TypeScript-bron te debuggen in plaats van de gecompileerde JS-versie.
Open babylon.gamepad.ts in de IE11 F12-console en je zult iets zien dat je misschien nog nooit eerder hebt gezien, een aantal TypeScript-talen:
U kunt het debuggen zoals u gewend bent aan het debuggen van uw JS-code, zelfs als het de gecompileerde JavaScript-versie is die momenteel door de browser wordt uitgevoerd.
Stel een onderbrekingspunt in op regel 17 en druk op F5 in het browservenster. U kunt de TypeScript-versie van de constructor debuggen:
Ga door naar regel 20, met de muis over deze en breid het uit om dat te controleren gamepadEventSupported ingesteld op waar:
Laad dezelfde pagina: http://david.blob.core.windows.net/babylonjs/gamepad/index.html en druk op F12 in Chrome of Ctrl-Shift-I in Opera.
Klik op het configuratiepictogram en zorg ervoor dat de Schakel JavaScript-bronkaarten in optie is ingeschakeld. Het moet standaard worden ingesteld:
Met Chrome en Opera kunt u de uitgevoerde wijzigingen bekijken babylon.gamepads.js code, maar als u een onderbrekingspunt in de JavaScript-versie probeert in te stellen, wordt deze niet weergegeven. In plaats daarvan zal het worden ingesteld in de broncode die is toegewezen aan deze versie: babylon.gamepads.ts.
Probeer bijvoorbeeld een breekpunt in te stellen op regel 18 van de babylon.gamepads.js JavaScript-bestand en je zult zien dat het wordt ingesteld op regel 17 van de babylon.gamepads.ts TypeScript-bestand in plaats daarvan:
Natuurlijk kunt u ook de juiste onderbrekingspunten direct in de TypeScript-bron instellen zoals eerder gezien met IE11.
druk op F5 in het browservenster die onze demopagina host, kunt u nu mijn TypeScript-code debuggen. Ga naar regel 20 en ga met de muis over de this.gamepadEventSupported variabel. Het zou moeten verschijnen waar:
Laad dezelfde pagina: http://david.blob.core.windows.net/babylonjs/gamepad/index.html en druk op Besturing Shift-S om de native debugger te openen (gebruik geen F12 / Firebug, omdat het bronkaarten niet ondersteunt).
Controleer dat de Toon originele bronnen optie is aangevinkt:
Stel zoals op regel 17 een onderbrekingspunt in en laad de pagina opnieuw om in te breken in de code. Firefox biedt geen ondersteuning voor het zweven van de muis op de originele bron. Ga naar regel 20 en breid het uit deze object in plaats daarvan in het rechterpaneel om dat te controleren gamepadEventSupported is ook ingesteld op waar.
Tot nu toe hebben we alleen de foutopsporing uitgevoerd babylon.gamepads.js code met behulp van de babylon.gamepads.ts bron. Maar hoe zit het met dit vergaan testgamepad.min.js JavaScript-bestand?
De eerste oplossing is om de code mooier te maken. Het werkt met IE11, Chrome, Opera en Firefox.
In IE11, druk de Mooie afdruk knop of druk op Ctrl-Shift-P:
In Chrome / Opera, druk de knop:
In Firefox, druk ook op de knop:
Dit is veel beter, maar nog steeds niet zo goed als met de bronkaartenset. Om een stap verder te kunnen gaan, hebben we een nieuwe functie toegevoegd in de update van IE11 van augustus 2014. U kunt een bronkaart laden, zelfs als u deze uit het .js-bestand hebt verwijderd.
Stel je voor dat je wilt voorkomen dat iemand eenvoudig de productiecode van je web-app kan debuggen met behulp van de bronkaart, maar wil je dit toch kunnen? Verwijder gewoon de sourceMappingURL regel uit uw .js-bestand.
Als u Internet Explorer 11 gebruikt, kunt u de bronkaart nog steeds gebruiken door uw lokale gegevens te laden .kaart en bijbehorende broncode. Klik daarvoor met de rechtermuisknop op de testgamepad.min.js tab en druk op Kies bronkaart:
Download ze hier: http://david.blob.core.windows.net/babylonjs/gamepad/testgamepad.zip.
Pak het uit in de directory van je voorkeur en navigeer ernaar om het juiste te kiezen .kaart het dossier:
En nu kan de originele broncode opnieuw worden gedebugd:
Merk op dat het tabblad is hernoemd naar testgamepad.ts en dat de eerste variabelen nu worden getypt terwijl we wat TypeScript weergeven.
Cool, is het niet?
Dit artikel maakt deel uit van de web dev tech-serie van Microsoft. We zijn verheugd om te delen Microsoft Edge en het nieuwe EdgeHTML-renderingengine met jou. Download gratis virtuele machines of test op afstand op uw Mac, iOS, Android of Windows-apparaat @ http://dev.modern.ie/.
Leer JavaScript: de complete gids
We hebben een complete handleiding samengesteld om u te helpen JavaScript te leren, of u net bent begonnen als een webontwikkelaar of dat u meer geavanceerde onderwerpen wilt verkennen.
Accentsconagua