Zuordnen des verarbeiteten Codes zu Ihrem ursprünglichen Quellcode zum Debuggen

Artikel
02/06/2024

Wenn Sie ihren ursprünglichen Quellcode beim Debuggen von JavaScript in DevTools anzeigen und damit arbeiten möchten, anstatt mit der kompilierten und minimierten Version Ihres Codes arbeiten zu müssen, die vom Webserver zurückgegeben wird, verwenden Sie Quellzuordnungen.

Die Quellzuordnung sorgt dafür, dass Ihr clientseitiger Code lesbar und debugfähig bleibt, auch nachdem Ihr Buildprozess Ihren Code kompiliert und minimiert und zu einer einzigen Datei kombiniert hat. Quellzuordnungen ordnen Ihren kompilierten, minimierten Code Ihren ursprünglichen Quellcodedateien zu. In DevTools können Sie dann Ihren vertrauten, ursprünglichen Quellcode lesen und debuggen, anstatt den nicht erkennbaren transformierten und kompilierten Code.

Um Quellzuordnungen zu verwenden, müssen Sie ein Tool verwenden, wenn Sie Ihren Code erstellen, der Quellzuordnungen erstellen kann. Es stehen viele Tools zur Verfügung, z. B.:

Sass oder PostCSS, die Quellzuordnungen für CSS erstellen können.
Der TypeScript-Compiler , der TypeScript in JavaScript kompiliert und Quellzuordnungen zum Debuggen des ursprünglichen TypeScript-Codes erstellen kann.
Der Babel-Transpiler , der sowohl CSS- als auch JavaScript-Quellzuordnungen erzeugen kann.
Erstellen Sie Tools wie Webpack, Rollup, Vite und Parcel, die auch Quellzuordnungen erstellen können.

In diesem Artikel wird erläutert, wie Sie Quellzuordnungen in DevTools aktivieren und sie zum Debuggen Ihres Codes verwenden. Es wird nicht erläutert, wie Quellzuordnungen in Ihrem Buildprozess erstellt werden. Weitere Informationen zum Veröffentlichen von Quellzuordnungen auf dem Azure Artifacts-Symbolserver finden Sie unter Sicheres Debuggen von Originalcode durch Veröffentlichen von Quellzuordnungen auf dem Azure Artifacts-Symbolserver.

Quellzuordnungen in DevTools

Quellzuordnungen aus Buildtools führen dazu, dass DevTools ihre ursprünglichen Dateien zusätzlich zu ihren verknakteten Dateien lädt und den minimierten Code durch den ursprünglichen Code ersetzt. Zum Beispiel:

Im Tool Quellen können Sie die ursprünglichen Dateien anzeigen und Haltepunkte darin festlegen.
Im Leistungstool werden Ihre ursprünglichen Funktionsnamen im Flammendiagramm angezeigt.
Im Konsolentool können Sie Ihre ursprünglichen Dateinamen und Zeilennummern in Stapelablaufverfolgungen anzeigen.

In der Zwischenzeit führt Microsoft Edge tatsächlich Ihren minimierten Code aus, um die Webseite zu rendern. Quellzuordnungen werden nur von DevTools und nur zum Anzeigen von Quellcode für Entwickler verwendet.

DevTools weiß, wie eine Quellzuordnung geladen wird, wenn ein //# sourceMappingURL= Kommentar in einer kompilierten Datei gefunden wird. Der folgende Kommentar weist DevTools beispielsweise an, die Quellzuordnung aus http://example.com/path/to/your/sourcemap.mapzu laden:

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

Aktivieren von Quellzuordnungen in DevTools

Quellzuordnungen sind standardmäßig aktiviert.

So stellen Sie sicher, dass Quellzuordnungen aktiviert sind:

Klicken Sie zum Öffnen von DevTools in Microsoft Edge mit der rechten Maustaste auf eine Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS).
Klicken Sie in DevTools auf DevTools anpassen und steuern () >Einstellungen () >Einstellungen.
Stellen Sie auf der Seite Einstellungen im Abschnitt Quellen sicher, dass das Kontrollkästchen JavaScript-Quellzuordnungen aktivieren und das Kontrollkästchen CSS-Quellzuordnungen aktivieren aktiviert sind:
Klicken Sie in der oberen rechten Ecke der Einstellungen auf die Schaltfläche Schließen ().

Aktivieren des Ladens von Quellzuordnungen aus Remotedateipfaden

Standardmäßig lädt DevTools keine Quellzuordnungen, wenn die Quellzuordnungs-URL ein Remotedateipfad ist, z. B. wenn die Quellzuordnungs-URL mit file:// beginnt und auf eine Datei abzielt, die sich nicht auf dem aktuellen Gerät befindet.

So aktivieren Sie das Laden von Quellzuordnungen aus Dateipfaden:

Klicken Sie in DevTools auf DevTools anpassen und steuern () >Einstellungen () >Einstellungen.
Aktivieren Sie auf der Seite Einstellungen im Abschnitt Quellen das Kontrollkästchen DevTools das Laden von Ressourcen wie Quellzuordnungen aus Remotedateipfaden erlauben. Aus Sicherheitsgründen standardmäßig deaktiviert.

Debuggen mit Quellzuordnungen

Beim Debuggen Ihres Codes und wenn Quellzuordnungen aktiviert sind, werden Quellzuordnungen an mehreren Stellen verwendet:

Im Konsolentool werden Links von Protokollmeldungen zu Quelldateien zu den ursprünglichen Dateien und nicht zu den kompilierten Dateien weitergeleitet.
Beim schrittweisen Durchlaufen von Code im Quellentool werden die ursprünglichen Dateien im Bereich Navigator auf der linken Seite angezeigt. Wenn Sie eine Originaldatei öffnen, wird der ursprüngliche Code angezeigt, und Sie können darin Haltepunkte festlegen. Weitere Informationen zum Debuggen mit Haltepunkten im Quellentool finden Sie unter Anhalten von Code mit Haltepunkten.
Im Tool Quellen öffnen die Links zu Quelldateien, die in der Aufrufliste des Debuggerbereichs angezeigt werden, die ursprünglichen Quelldateien.
Im Leistungstool zeigt das Flammendiagramm die ursprünglichen Funktionsnamen an, nicht die kompilierten Funktionsnamen.

Siehe auch

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die Originalseite befindet sich hier und wurde von Meggin Kearney (Technical Writer) und Paul Bakaus (Open Web Developer Advocate, Google: Tools, Performance, Animation und UX) verfasst.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.

Teilen über