Sorgen Sie dafür, dass Ihr clientseitiger Code auch nach dem Kombinieren, Komprimieren oder Kompilieren lesbar und Debug-fähig ist. Ordnen Sie Ihren Quellcode mithilfe von Source Maps im Bereich Quellen dem kompilierten Code zu.
Erste Schritte mit Präprozessoren
Quellzuordnungen von Präprozessoren führen dazu, dass die Entwicklertools neben den komprimierten Dateien auch die Originaldateien laden.
Chrome führt dann den komprimierten Code aus, aber im Bereich Quellen wird der von Ihnen erstellte Code angezeigt. Sie können in Quelldateien Haltepunkte festlegen und Code schrittweise ausführen. Alle Fehler, Protokolle und Haltepunkte werden automatisch zugeordnet.
So sehen Sie, als würden Sie eine Fehlerbehebung des Codes durchführen, wie Sie ihn geschrieben haben, im Gegensatz zu Code, der von Ihrem Entwicklungsteam bereitgestellt und vom Browser ausgeführt wird.
So verwenden Sie Quellzuordnungen im Bereich Quellen:
- Verwenden Sie nur die Präprozessoren, die Quellzuordnungen erzeugen können.
- Prüfen Sie, ob Ihr Webserver Quellzuordnungen bereitstellen kann.
Unterstützten Präprozessor verwenden
Gängige Präprozessoren, die in Kombination mit Quellzuordnungen verwendet werden, sind unter anderem:
- Transpiler: Babel
- Compiler: TypeScript und Dart
- Minifizierer: terser
- Bundler und Entwicklungsteams: Webpack, Vite, esbuild und Parcel
Eine erweiterte Liste finden Sie unter Quellkarten: Sprachen, Tools und weitere Informationen.
Quellzuordnungen in den Einstellungen aktivieren
Aktivieren Sie unter 
Einstellungen > Einstellungen > Quellen die Option 
JavaScript-Quellzuordnungen aktivieren.
Prüfen, ob Quellzuordnungen erfolgreich geladen wurden
Weitere Informationen finden Sie unter Entwicklerressourcen: Quellzuordnungen manuell ansehen und laden.
Fehlerbehebung mit Quellzuordnungen
Wenn Quellzuordnungen bereit und aktiviert sind, können Sie Folgendes tun:
- Öffnen Sie die Quellen Ihrer Website im Bereich Quellen.
Wenn Sie sich nur auf den von Ihnen erstellten Code konzentrieren möchten, gruppieren Sie erstellte und bereitgestellte Dateien in der Dateistruktur. Maximieren Sie dann den Bereich
Verfasst und öffnen Sie die ursprüngliche Quelldatei im Editor.
Legen Sie wie gewohnt einen Haltepunkt fest. Zum Beispiel ein Logpoint. Führen Sie dann den Code aus.
Der Editor fügt in der Statusleiste am unteren Rand einen Link zur bereitgestellten Datei ein. Dasselbe gilt für bereitgestellte CSS-Dateien.
Öffnen Sie die Leiste Konsole. In diesem Beispiel wird in der Konsole neben der Nachricht des Logpoints ein Link zur Originaldatei und nicht zur bereitgestellten Datei angezeigt.
Ändern Sie den Haltepunkttyp in einen regulären Haltepunkttyp und führen Sie den Code noch einmal aus. Die Ausführung wird diesmal pausiert.
Beachten Sie, dass im Bereich Aufrufstack der Name der ursprünglichen Datei und nicht der Name der bereitgestellten Datei angezeigt wird.
Klicken Sie unten im Editor in der Statusleiste auf den Link zur bereitgestellten Datei. Im Bereich Quellen werden Sie zur entsprechenden Datei weitergeleitet.
Wenn Sie eine bereitgestellte Datei öffnen, werden Sie von den Entwicklertools benachrichtigt, wenn der Kommentar //# sourceMappingURL und die zugehörige Originaldatei gefunden wurden.
Beachten Sie, dass der Editor die bereitgestellte Datei automatisch optimiert. In Wirklichkeit enthält er mit Ausnahme des //# sourceMappingURL-Kommentars den gesamten Code in einer einzigen Zeile.
eval()-Anrufe mit #sourceURL benennen
Mit #sourceURL können Sie das Debugging bei eval()-Aufrufen vereinfachen. Dieses Hilfsprogramm sieht dem Attribut //# sourceMappingURL sehr ähnlich. Weitere Informationen finden Sie in der Source Map V3-Spezifikation.
Der Kommentar //# sourceURL=/path/to/source.file weist den Browser an, nach der Quelldatei zu suchen, wenn Sie eval() verwenden. So können Sie Ihre Bewertungen, Inline-Skripts und Stile benennen.
Testen Sie die Funktion auf dieser Demoseite:
- Öffnen Sie die Entwicklertools und gehen Sie zum Bereich Quellen.
- Geben Sie auf der Seite einen beliebigen Dateinamen in das Eingabefeld Code benennen: ein.
- Klicken Sie auf die Schaltfläche Kompilieren. Eine Warnung mit der ausgewerteten Summe aus der CoffeeScript-Quelle wird angezeigt.
- Öffnen Sie im Bereich Seite in der Dateistruktur eine neue Datei mit dem benutzerdefinierten Dateinamen, den Sie eingegeben haben. Sie enthält den kompilierten JavaScript-Code mit dem Kommentar
// #sourceURLmit dem ursprünglichen Namen der Quelldatei. - Klicken Sie zum Öffnen der Quelldatei auf den Link in der Statusleiste des Editors.
