Share
Ich bin mir sicher, dass Sie als JavaScript-Entwickler bereits in dieses Szenario geraten sind: Etwas stimmt nicht mit der Produktionsversion Ihres Codes überein, und das Debuggen direkt vom Produktionsserver ist ein Albtraum, nur weil er minimiert wurde oder war zusammengestellt aus einer anderen Sprache wie TypeScript oder CoffeeScript.
Die guten Nachrichten? Die neuesten Versionen von Browsern können Sie mithilfe von Quellkarten unterstützen, um dieses Problem zu lösen. In diesem Tutorial zeige ich Ihnen, wie Sie in allen Browsern Quellkarten finden und die wenigen Minuten, die Sie zum Debuggen benötigen, optimal nutzen.
Gemäß dem großen Artikel zu Einführung in JavaScript-Quellkarten ist eine Quellkarte "eine Möglichkeit, eine kombinierte / minifizierte Datei wieder in einen unbebauten Zustand zu bringen. Wenn Sie für die Produktion erstellen und Ihre JavaScript-Dateien minimieren und kombinieren, generieren Sie eine Quellenzuordnung, die Informationen zu Ihren Originaldateien enthält”.
Bitte zögern Sie nicht, den Artikel von Ryan Seddon zuerst zu lesen, da er ausführliche Informationen zur Funktionsweise einer Quellkarte enthält. Sie erfahren dann, dass eine Quellzuordnung eine Zwischendatei verwendet, die den Abgleich zwischen der Produktionsversion Ihres Codes und dem ursprünglichen Entwicklungsstatus vornimmt. Das Format dieser Datei wird hier beschrieben: Source Map Revision 3 Proposal.
Zur Veranschaulichung möchte ich Ihnen mitteilen, wie wir derzeit arbeiten, während wir unser Open-Source-Framework WebGLBabylon.j entwickeln. Es steht geschrieben Typoskript. Die Prinzipien bleiben jedoch gleich, wenn Sie reines JavaScript (komprimiert / reduziert) oder andere Sprachen wie CoffeeScript verwenden.
Lass uns jetzt mit der Quellkartenmagie direkt in den Browsern spielen.
In letzter Zeit habe ich die Unterstützung der Gamepad-API in unsere Spiele-Engine implementiert. Verwenden wir den Code für dieses Tutorial.
In diesem Artikel verwende ich die folgenden Browser:
Navigieren Sie zu dieser URL: http://david.blob.core.windows.net/babylonjs/gamepad/index.html und Sie erhalten diese Seite:
Schließen Sie einen Xbox 360- oder Xbox One-Controller an den USB-Port Ihres Computers an. Drücken Sie die EIN Taste, um das Gamepad zu aktivieren und damit zu spielen:
Aber mach dir keine Sorgen, Sie benötigen keinen Gamepad-Controller, um dieses Tutorial zu befolgen.
Hinweis: Der TypeScript-Compiler generiert automatisch die Quellenzuordnung für Sie. Wenn Sie beim Generieren Ihrer minimierten Version Ihres Codes eine Quellzuordnung erstellen möchten, würde ich die Verwendung von UglifyJS2 empfehlen.
Für diesen Artikel habe ich sogar beides gemischt. Ich habe den von TypeScript generierten JS minimiert und die Quellzuordnung mit dieser Befehlszeile beibehalten:
uglifyjs testgamepad.js -o testgamepad.min.js --source-map testgamepad.min.js.map --in-source-map testgamepad.js.map
Sobald die GamePad-Testseite geladen ist, drücken Sie F12 in IE11.
Sie sehen, dass der HTML-Quellcode zwei JavaScript-Dateien referenziert: babylon.gamepads.js am Anfang der Seite und testgamepad.min.js ganz am Ende. Die erste Datei stammt aus unserem Framework auf GitHub und die zweite ist ein einfaches Beispiel, das zeigt, wie man sie konsumiert.
Drücken Sie auf die Debugger Taste (oder Steuerung-3) und dann auf das Ordnersymbol.
Sie sehen, dass der IE11 zwei Dateien zum Debuggen bietet: babylon.gamepads.ts und testgamepad.min.js.
Beginnen wir mit der Überprüfung der babylon.gamepads.ts Fall. Warum zeigt IE es an, anstatt die .js-Version vom Browser auszuführen?
Dies ist dank des Quellkartenmechanismus möglich. Am Ende von babylon.gamepads.js Datei finden Sie diese bestimmte Zeile:
// # sourceMappingURL = babylon.gamepads.js.map
Öffnen babylon.gamepads.js.map um zu verstehen, wie es funktioniert:
"version": 3, "file": "babylon.gamepads.js", "sourceRoot": "", "sources": ["babylon.gamepads.ts"], "names": ["BABYLON", " BABYLON.Gamepads ",…]
Durch das Lesen dieser JSON-Datei weiß der IE11, dass er zuordnen sollte:babylon.gamepads.ts"Zu"babylon.gamepads.js”. Aus diesem Grund bietet es direkt an, die TypeScript-Quelle anstelle der kompilierten JS-Version zu debuggen.
Öffnen babylon.gamepad.ts In der IE11 F12-Konsole sehen Sie etwas, das Sie vielleicht noch nie gesehen haben, eine Art TypeScript-Sprache:
Sie können es debuggen, wenn Sie es gewohnt sind, Ihren JS-Code zu debuggen, selbst wenn es sich um die kompilierte JavaScript-Version handelt, die derzeit vom Browser ausgeführt wird.
Setzen Sie einen Haltepunkt in Zeile 17 und drücken Sie F5 im Browserfenster. Sie können die TypeScript-Version des Konstruktors debuggen:
Steige in die Zeile 20 und fahre mit der Maus darüber diese und erweitern Sie es, um das zu überprüfen gamepadEventSupported ist eingestellt auf wahr:
Laden Sie die gleiche Seite: http://david.blob.core.windows.net/babylonjs/gamepad/index.html und drücken Sie F12 in Chrome oder Control-Shift-I in der Oper.
Klicken Sie auf das Konfigurationssymbol und stellen Sie sicher, dass die Aktivieren Sie JavaScript-Quellkarten Option ist aktiviert. Es sollte standardmäßig eingestellt sein:
In Chrome und Opera können Sie die Ausführung überprüfen babylon.gamepads.js Code, aber wenn Sie versuchen, einen Haltepunkt in der JavaScript-Version festzulegen, wird er nicht angezeigt. Es wird stattdessen in den Quellcode gesetzt, der dieser Version zugeordnet ist: babylon.gamepads.ts.
Versuchen Sie beispielsweise, einen Haltepunkt in Zeile 18 der Zeile zu setzen babylon.gamepads.js JavaScript-Datei, und Sie werden sehen, dass sie in Zeile 17 der gesetzt wird babylon.gamepads.ts Stattdessen TypScript-Datei:
Natürlich können Sie die entsprechenden Haltepunkte auch direkt in der TypeScript-Quelle festlegen, wie Sie es zuvor mit IE11 gesehen haben.
Drücken Sie F5 Im Browserfenster, in dem sich unsere Demo-Seite befindet, können Sie jetzt meinen TypeScript-Code debuggen. Steigen Sie in Zeile 20 auf und fahren Sie mit der Maus über die this.gamepadEventSupported Variable. Es sollte angezeigt werden wahr:
Laden Sie die gleiche Seite: http://david.blob.core.windows.net/babylonjs/gamepad/index.html und drücken Sie Control-Shift-S Öffnen Sie den nativen Debugger (verwenden Sie F12 / Firebug nicht, da er keine Quellkarten unterstützt.).
Überprüfen Sie, ob die Originalquellen anzeigen Option ist markiert:
Setzen Sie einen Haltepunkt wie üblich in Zeile 17 und laden Sie die Seite erneut, um in den Code zu gelangen. Firefox unterstützt keine Mausbewegungen auf der Originalquelle. Steigen Sie bis Zeile 20 auf und erweitern Sie die diese Objekt stattdessen im rechten Bereich, um das zu überprüfen gamepadEventSupported ist auch auf true gesetzt.
Bis jetzt haben wir nur den Fehler behoben babylon.gamepads.js Code mit der babylon.gamepads.ts Quelle. Aber was ist damit gemindert? testgamepad.min.js JavaScript-Datei?
Die erste Lösung besteht darin, den Code zu verbessern. Es funktioniert mit IE11, Chrome, Opera und Firefox.
Im IE11, drücken Sie die Hübscher Druck Taste oder drücken Control-Shift-P:
Im Chrome / Opera, drücken Sie die Taste:
Im Feuerfuchs, drücken Sie auch die Taste:
Dies ist viel besser, aber immer noch nicht so gut wie bei der Quell-Map. Um noch einen Schritt weiter gehen zu können, haben wir in der Aktualisierung von IE11 vom August 2014 eine neue Funktion hinzugefügt. Sie können eine Quellzuordnung auch laden, wenn Sie sie aus der JS-Datei entfernt haben.
Stellen Sie sich vor, Sie möchten verhindern, dass jemand den Produktionscode Ihrer Web-App mithilfe der Quellenzuordnung mühelos debuggt. Sie möchten dies aber trotzdem tun? Entfernen Sie einfach die sourceMappingURL Zeile aus Ihrer JS-Datei.
Mit Internet Explorer 11 können Sie die Quellzuordnung weiterhin verwenden, indem Sie Ihre lokale Karte laden .Karte und zugehöriger Quellcode. Klicken Sie dazu mit der rechten Maustaste auf die Schaltfläche testgamepad.min.js Tab und drücken Sie Wählen Sie eine Quellkarte:
Laden Sie sie hier herunter: http://david.blob.core.windows.net/babylonjs/gamepad/testgamepad.zip.
Entpacken Sie das in Ihrem bevorzugten Verzeichnis und navigieren Sie zu ihm, um das Recht zu wählen .Karte Datei:
Nun kann der ursprüngliche Quellcode erneut debuggt werden:
Beachten Sie, dass die Registerkarte umbenannt wurde testgamepad.ts und dass die ersten Variablen jetzt eingegeben werden, während wir TypeScript anzeigen.
Cool, nicht wahr??
Dieser Artikel ist Teil der Web-Dev-Tech-Serie von Microsoft. Wir freuen uns zu teilen Microsoft Edge und das Neue EdgeHTML-Rendering-Engine mit dir. Erhalten Sie kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac, iOS, Android oder Windows-Gerät. http://dev.modern.ie/.
Lernen Sie JavaScript: Das komplette Handbuch
Wir haben ein umfassendes Handbuch zusammengestellt, mit dessen Hilfe Sie JavaScript erlernen können, egal ob Sie gerade erst als Webentwickler anfangen oder sich mit fortgeschrittenen Themen befassen möchten.
Accentsconagua