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.

Alle heise-Magazine mit heise+ lesen

3,99 € / Woche

Ein Abo, alle Magazine: c't, iX, Mac & i, Make & c't Fotografie

  • Alle heise-Magazine im Browser und als PDF
  • Alle exklusiven heise+ Artikel frei zugänglich
  • heise online mit weniger Werbung lesen
  • Vorteilspreis für Magazin-Abonnenten
Jetzt unbegrenzt weiterlesen Vierwöchentliche Abrechnung.

Alle Ausgaben freischalten

2,95 € 0,25 € / Woche

Nach Testphase 2,95 € wtl.

  • Zugriff auf alle c't-Magazine
  • PDF-Ausgaben zum Herunterladen
  • Zugriff in der c't-App für unterwegs
Jetzt testen Nach Testphase jederzeit monatlich kündbar.

Ausgabe einmalig freischalten

4,70 € / Ausgabe

Diese Ausgabe lesen – ohne Abobindung

  • Sicher einkaufen im heise shop
  • Magazin direkt im Browser lesen
  • Dauerhaft als PDF behalten