Der clientseitige Code bleibt auch nach dem Kombinieren, Minimieren oder Kompilieren lesbar und kann gedebuggt werden. Verwenden Sie Quellzuordnungen, um Ihren Quellcode im Bereich Quellen Ihrem kompilierten Code zuzuordnen.
Erste Schritte mit Preprocessors
Quellzuordnungen von Pre-Compilern führen dazu, dass in den Entwicklertools zusätzlich zu den minimierten Dateien auch die Originaldateien geladen werden.
Chrome führt Ihren minimierten Code aus, im Bereich Quellen wird jedoch der von Ihnen erstellte Code angezeigt. Sie können Haltepunkte setzen und Code in Quelldateien durchgehen. Alle Fehler, Protokolle und Haltepunkte werden automatisch zugeordnet.
So haben Sie den Eindruck, den Code zu debuggen, während Sie ihn schreiben, im Gegensatz zu Code, der von Ihrem Entwicklungsserver bereitgestellt und vom Browser ausgeführt wird.
So verwenden Sie Quellkarten im Bereich Quellen:
- Verwenden Sie nur die Preprozessoren, die Quellkarten erstellen können.
- Prüfen Sie, ob Ihr Webserver Quellkarten bereitstellen kann.
Unterstützten Preprozessor verwenden
Zu den gängigen Preprozessoren, die in Kombination mit Quellkarten verwendet werden, gehören unter anderem:
- Transpiler: Babel
- Compiler: TypeScript und Dart
- Minifizierer: terser
- Bundler und Entwicklungsserver: 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-Quellkarten.
Prüfen, ob Quellkarten erfolgreich geladen wurden
Weitere Informationen finden Sie unter Entwicklerressourcen: Quellkarten manuell ansehen und laden.
Fehlerbehebung mit Quellzuordnungen
Wenn die Quellkarten bereit und aktiviert sind, haben Sie folgende Möglichkeiten:
- Öffnen Sie im Bereich Quellen die Quellen Ihrer Website.
Wenn Sie sich nur auf den von Ihnen erstellten Code konzentrieren möchten, gruppieren Sie erstellte und bereitgestellte Dateien im Dateibaum. Maximieren Sie dann den Bereich
Authored (Autorisiert) und öffnen Sie die ursprüngliche Quelldatei im Editor.