Achten Sie darauf, dass Ihr clientseitiger Code auch nach der Kombination, Komprimierung oder Kompilierung lesbar und Debug-fähig bleibt. Mithilfe von Quellzuordnungen können Sie im Bereich Quellen Ihren Quellcode dem kompilierten Code zuordnen.
Erste Schritte mit Präprozessoren
Quellzuordnungen von Präprozessoren sorgen dafür, dass die Entwicklertools zusätzlich zu den reduzierten Dateien die Originaldateien laden.
Chrome führt den reduzierten Code tatsächlich aus, aber im Bereich Quellen wird der von Ihnen erstellte Code angezeigt. Sie können in Quelldateien Haltepunkte festlegen und Code schrittweise durcharbeiten. Alle Fehler, Protokolle und Haltepunkte werden automatisch zugeordnet.
Dadurch sieht es so aus, als würden Sie den Code so debuggen, wie Sie ihn geschrieben haben, im Gegensatz zu Code, der von Ihrem Entwicklungsserver bereitgestellt und vom Browser ausgeführt wird.
So verwenden Sie Quellzuordnungen im Bereich Quellen:
- Verwenden Sie nur die Präprozessoren, die Quellzuordnungen erstellen können.
- Prüfen Sie, ob Ihr Webserver Quellzuordnungen bereitstellen kann.
Unterstützten Präprozessor verwenden
Zu den gängigen Präprozessoren, die in Kombination mit Quellzuordnungen verwendet werden, gehören unter anderem:
- Transpiler: Babel
- Compiler: TypeScript und Dart
- Datenreduzierer: terser
- Bundler und Entwicklungsserver: Webpack, Vite, esbuild und Parcel
Eine ausführliche Liste finden Sie unter Quellzuordnungen: Sprachen, Tools und weitere Informationen.
Quellzuordnungen in den Einstellungen aktivieren
Klicken Sie unter 
Einstellungen > Einstellungen > Quellen das Kästchen 
JavaScript-Quellzuordnungen aktivieren an.
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.
Gruppieren Sie erstellte und bereitgestellte Dateien in der Dateistruktur, um sich nur auf den von Ihnen erstellten Code zu konzentrieren. Maximieren Sie dann den Abschnitt
Verfasst und öffnen Sie die ursprüngliche Quelldatei im Editor.
Legen Sie wie gewohnt einen Haltepunkt fest. 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 Console-Leiste. In diesem Beispiel wird in der Konsole neben der Nachricht des Logpoints ein Link zur ursprünglichen Datei und nicht zur bereitgestellten Datei angezeigt.
Ändern Sie den Haltepunkttyp in einen regulären Typ 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 bereitgestellten Datei angezeigt wird.
Klicken Sie in der Statusleiste unten im Editor auf den Link zur bereitgestellten Datei. Im Bereich Quellen gelangen Sie zur entsprechenden Datei.
Wenn Sie eine bereitgestellte Datei öffnen, werden Sie von den Entwicklertools benachrichtigt, wenn der //# sourceMappingURL-Kommentar und die zugehörige Originaldatei gefunden wurden.
Der Editor hat die bereitgestellte Datei automatisch optimiert. Tatsächlich enthält sie den gesamten Code in einer einzigen Zeile, mit Ausnahme des //# sourceMappingURL-Kommentars.
eval()-Anrufe mit #sourceURL benennen
Mit #sourceURL können Sie die Fehlerbehebung 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 und Inline-Skripts und Stile leichter benennen.
Teste den Test auf dieser Demoseite:
- Öffnen Sie die Entwicklertools und gehen Sie zum Bereich Quellen.
- Geben Sie auf der Seite in das Eingabefeld Code benennen: einen beliebigen Dateinamen ein.
- Klicken Sie auf die Schaltfläche Kompilieren. Eine Benachrichtigung mit der ausgewerteten Summe aus der CoffeeScript-Quelle wird angezeigt.
- Öffnen Sie im Bereich Seite in der Dateistruktur eine neue Datei mit dem von Ihnen eingegebenen benutzerdefinierten Dateinamen. Sie enthält den kompilierten JavaScript-Code, der den
// #sourceURL-Kommentar mit dem ursprünglichen Namen der Quelldatei enthält. - Klicken Sie zum Öffnen der Quelldatei auf den Link in der Statusleiste von Editor.
