Source map
Ein Source Map ist ein JSON-Dateiformat, das zwischen dem vom Browser empfangenen minifizierten oder transformierten Code und seiner ursprünglichen, unveränderten Form abbildet. Dies ermöglicht die Rekonstruktion und Nutzung des Originalcodes beim Debuggen.
Der von einem Browser ausgeführte Code wird häufig in irgendeiner Weise vom ursprünglichen Quellcode, der von einem Entwickler erstellt wurde, transformiert. Dafür gibt es verschiedene Gründe:
- Um die Auslieferung des Codes vom Server effizienter zu gestalten, indem Quellcode-Dateien kombiniert und minifiziert werden.
- Um ältere Browser zu unterstützen, indem moderne Funktionen in ältere Entsprechungen umgewandelt werden.
- Um Sprachen zu verwenden, die von Browsern nicht unterstützt werden, wie TypeScript oder Sass.
In diesen Situationen ist das Debuggen des ursprünglichen Quellcodes viel einfacher als der Code im transformierten Zustand, den der Browser heruntergeladen hat.
Browser erkennen eine Source Map über den SourceMap HTTP-Header für eine Ressource oder eine sourceMappingURL-Annotation im generierten Code.
Beispiel
Betrachten Sie beispielsweise diese SCSS-Syntax von Sass:
ul {
list-style: none;
li {
display: inline;
}
}
Während des Build-Prozesses wird das SCSS in CSS umgewandelt.
Es wird eine Source Map-Datei index.css.map erzeugt und in einem Kommentar am Ende des CSS verlinkt:
ul {
list-style: none;
}
ul li {
display: inline;
}
/*# sourceMappingURL=index.css.map */
Diese Map-Datei enthält nicht nur Zuordnungen zwischen dem ursprünglichen SCSS und dem generierten CSS, sondern auch den originalen SCSS-Quellcode in kodierter Form. Sie wird vom CSS-Parser des Browsers ignoriert, aber von den DevTools des Browsers verwendet:
{
"version": 3,
"sourceRoot": "",
"sources": ["index.scss"],
"names": [],
"mappings": "AAAA;EACC;;AACA;EACC",
"file": "index.css"
}
Die Source Map ermöglicht es den DevTools des Browsers, auf bestimmte Zeilen in der ursprünglichen SCSS-Datei zu verlinken und den Quellcode anzuzeigen:
