Tipps zu Entwicklertools: Was sind Source Maps?

Sofia Emelianova
Sofia Emelianova

Mit Quellzuordnungen bleibt Ihr Code auch nach dem Kombinieren und Reduzieren lesbar und Debug-fähig, ohne dass die Leistung beeinträchtigt wird.

Wenn Sie verschiedene Transpiler, Minifier und Bundler verwenden, unterscheidet sich der bereitgestellte Code von dem von Ihnen erstellten Code. Zur Verbesserung der Netzwerkleistung komprimieren diese Tools den Code in einer Zeile, entfernen unnötige Zeichen und kürzen Variablen.

Der reduzierte und der ursprüngliche Code.

Viele Tools können Source Maps generieren, die Ihren Code begleiten.

Eine Source Map.

Die Chrome-Entwicklertools lesen sowohl den bereitgestellten Code als auch die Source Maps und können wie gewohnt Fehler in Ihrem Code beheben, auch mit Haltepunkten.

Haltepunkte in Entwicklertools in einer erstellten Quelldatei verwenden

Weitere Informationen zur Funktionsweise von Source Maps finden Sie im Visualizer für Source Maps.

Außerdem können Quellzuordnungen Erweiterungen enthalten. Wenn Sie Tools und Frameworks entwickeln, sollten Sie diese unterstützen. In dieser Fallstudie: Better Angular Debugging with DevTools haben das DevTools-Team und Angular die Fehlerbehebung in den Entwicklertools durch die Unterstützung der x_google_ignoreList-Erweiterung verbessert.

Weitere Informationen erhalten Sie unter: