Source-Map
Eine Source-Map ist ein JSON-Dateiformat, das eine Zuordnung zwischen minifizierten oder transformierten Code, den der Browser empfängt, und seiner ursprünglichen, unveränderten Form erstellt. Dies ermöglicht, den Originalcode zu rekonstruieren und beim Debuggen zu verwenden.
Der vom Browser ausgeführte Code wird häufig in irgendeiner Form vom ursprünglichen Quellcode, der von einem Entwickler erstellt wurde, transformiert. Es gibt mehrere Gründe dafür:
- Um die Auslieferung des Codes vom Server durch Kombinieren und Minifizieren der Quelldateien effizienter zu gestalten.
- Um ältere Browser zu unterstützen, indem moderne Funktionen in ältere Äquivalente umgewandelt werden.
- Um Sprachen zu nutzen, 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 Quellcode 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 zum Beispiel diese SCSS-Syntax von Sass:
ul {
list-style: none;
li {
display: inline;
}
}
Während des Build-Prozesses wird das SCSS in CSS umgewandelt. Eine Source-Map-Datei index.css.map wird generiert und wird 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, zu bestimmten Zeilen in der ursprünglichen SCSS-Datei zu verlinken und den Quellcode anzuzeigen:
