c't 17/2017
S. 166
Know-how
Sourcemaps
Aufmacherbild

Code-Kartographie

Sourcemaps einsetzen und verstehen

Um Daten zu sparen, kommen JavaScript und CSS heute meist nicht so im Browser an, wie der Entwickler sie geschrieben hat. Sourcemaps sorgen dafür, dass die Fehlersuche nicht im Code-Heuhaufen stattfinden muss.

Frontend-Webprojekte durchlaufen heute in der Regel einen Build-Prozess ähnlich wie in der klassischen Software-Entwicklung. Das liegt an Sprachen wie Sass, das sich angenehmer schreibt als CSS, aber nach einer Konvertierung verlangt. Was im Browser als JavaScript ankommt, war ursprünglich vielleicht TypeScript, CoffeeScript oder eine brandneue ECMAScript-Version – und selbst wenn nicht, empfiehlt es sich aus Performance-Gründen, mehrere Dateien zu einer zusammenzufügen und den Code zu schrumpfen („minify“).

Die damit einhergehende Verschleierung des Quellcodes („obfuscation“) stellt für manche Entwickler einen zusätzlichen Anreiz dar. Und die üblichen Node.js-basierenden Build-Werkzeuge erledigen die Konvertierung und Minifizierung automatisch bei jeder Änderung am Code oder beim Deployment.