Tipps zu Entwicklertools: Was sind Source Maps?

Sofia Emelianova
Sofia Emelianova

Mit Quellcode-Maps können Sie Ihren Code auch nach dem Kombinieren und Minimieren lesbar und debuggbar halten, ohne die Leistung zu beeinträchtigen.

Wenn Sie verschiedene Transpiler, Minifier und Bundler verwenden, unterscheidet sich der bereitgestellte Code von dem Code, den Sie schreiben. Um die Netzwerkleistung zu verbessern, komprimieren diese Tools den Code in eine einzige Zeile, entfernen unnötige Zeichen und kürzen Variablen.

Minimierter Code und Originalcode.

Viele Tools können Quellkarten für Ihren Code generieren.

Eine Quellzuordnung.

Die Chrome-Entwicklertools lesen sowohl den bereitgestellten Code als auch die Quellkarten und ermöglichen es Ihnen, Ihren Code wie gewohnt zu debuggen, auch mit Bruchpunkten.

In DevTools in einer erstellten Quelldatei werden Haltestellen verwendet.

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

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

Weitere Informationen erhalten Sie unter: