HTTP SourceMap Header

Der HTTP-Header SourceMap ist ein Response-Header, der beim Ausliefern von JavaScript oder CSS Dateien die URL zur zugehörigen Source Map angibt. Browser Developer Tools verwenden Source Maps zum Debugging von minifiziertem oder transpiliertem Production-Code.

Typ

Response-Header

Syntax

Der Header gibt die URL zur Source Map Datei an.

http 
SourceMap: /static/js/app.js.map
SourceMap: https://cdn.example.com/bundle.min.js.map

Direktiven

Die Direktiven definieren den Pfad zur Source Map Datei.

url
Relative oder absolute URL zur Source Map Datei im JSON-Format. Relative URLs werden relativ zur JavaScript/CSS Datei aufgelöst.
absolute-url
Vollständige URL mit Schema für Source Maps auf CDN oder separatem Origin.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für den SourceMap-Header.

Beispiel 1 Relative Source Map

http 
GET /static/js/app.min.js HTTP/1.1
Host: example.com

HTTP/1.1 200 OK
Content-Type: application/javascript
SourceMap: app.min.js.map
Cache-Control: public, max-age=31536000

!function(e,t){"use strict";...}(window,document);

Minifizierte JavaScript-Datei verlinkt Source Map im selben Verzeichnis für lokales Debugging.

Beispiel 2 CDN Source Map

http 
GET /assets/bundle.min.js HTTP/1.1
Host: cdn.example.com

HTTP/1.1 200 OK
Content-Type: application/javascript
SourceMap: https://sourcemaps.example.com/v1.2.3/bundle.js.map
Cache-Control: immutable, max-age=31536000

(function(){var a=function(){...}})();

Production Bundle auf CDN verlinkt Source Map auf separatem Origin für Security-Isolation.

Beispiel 3 CSS Source Map

http 
GET /css/styles.min.css HTTP/1.1
Host: app.example.com

HTTP/1.1 200 OK
Content-Type: text/css
SourceMap: /maps/styles.css.map
Cache-Control: public, max-age=86400

body{margin:0;padding:0;font-family:Arial,sans-serif}...

Minifiziertes CSS verlinkt Source Map für Debugging von SCSS/LESS Source-Files in DevTools.

Vorteile für die Systemarchitektur

  • Production Debugging: Entwickler debuggen Original-Source-Code trotz Minification und Transpilation
  • Performance ohne Debugging-Verlust: Minified Code reduziert Bundle-Size, Source Maps nur bei Bedarf geladen
  • Multi-Stage Build-Pipelines: TypeScript, Babel, Webpack Transformationen bleiben nachvollziehbar

Spezifikation

Source Map Revision 3 Proposal https://sourcemaps.info/spec.html

Weitere Spezifikationen

Content-Type Header, Server Header