Source Map
Ein Source Map ist ein JSON-Dateiformat, das zwischen komprimiertem oder transformiertem Code, der vom Browser empfangen wird, und seiner ursprünglichen, unmodifizierten Form vermittelt, sodass der ursprüngliche Code rekonstruiert und beim Debuggen verwendet werden kann.
Der vom Browser ausgeführte Code wird oft in irgendeiner Weise von der ursprünglichen Quelle, die vom Entwickler erstellt wurde, transformiert. Dafür gibt es mehrere Gründe:
- Um die Bereitstellung von Code vom Server effizienter zu gestalten, indem Quelldateien kombiniert und minimiert werden.
- Um ältere Browser zu unterstützen, indem moderne Funktionen in ältere Äquivalente transformiert werden.
- Um Sprachen zu verwenden, die von Browsern nicht unterstützt werden, wie TypeScript oder Sass.
In diesen Situationen ist es intuitiver, den ursprünglichen Quellcode zu debuggen als den transformierten Code, den der Browser heruntergeladen hat. Browser erkennen ein Source Map über den SourceMap HTTP-Header für eine Ressource oder eine sourceMappingURL-Annotation im generierten Code.
Beispiel
Beispielsweise betrachten wir diesen SCSS-Syntax von Sass:
ul {
list-style: none;
li {
display: inline;
}
}
Während des Build-Prozesses wird das SCSS in CSS transformiert. Eine Source Map-Datei index.css.map wird generiert 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 ursprünglichen SCSS-Quellcode in codierter 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 spezifische Zeilen in der ursprünglichen SCSS-Datei zu verlinken und den Quellcode anzuzeigen:
