Mit CSS-Sourcemaps SCSS-Dateien in den Dev-Tools anzeigen

Manchmal sitzt man unter einem Stein und merkt es nicht. Ich hatte gerade einen Aha-Moment in Sachen CSS-Sourcemaps. Mit Hilfe einer Sourcemap kann man SASS-Module in den Dev-Tools im Browser anschauen. Aber der Reihe nach.

Was ist eine Sourcemap?

Sourcemaps kommen im Zusammenhang mit kompilierten Dateien zum Einsatz. CSS-Dateien und JavaScript-Dateien werden oft aus mehreren Modulen zusammengebaut (kompiliert). So muss der Browser nur noch eine Datei lesen und nicht jedes Modul einzeln.
Sourcemaps sind kleine JSON-Dateien, die man mit den üblichen Kompilierungs-Tools erzeugen kann. In dieser Datei, die auf .map endet, sind alle Module verzeichnet, die z.B. in meine style.css einfliessen.

Beispiel

Die style.css beruht auf einer SASS-Datei namens style.scss. Die Datei enthält drei Module. Über einen SASS-Compiler wird die style.scss zur style.css kompiliert.

/* style.scss */
@import 'header.scss';
@import 'content.scss';
@import 'footer.scss';

Eine Sourcemap style.css.map für diese Situation sieht so aus (Ausschnitt):

{
(...)
"sources": [
"style.scss",
"sass/header.scss",
"sass/content.scss",
"sass/footer.scss",
],
(...)

Was bewirkt eine Sourcemap?

Wenn ich im Browser über die Dev-Tools ein Element auf einer Website anschaue, weil ich wissen möchte, welche CSS-Anweisungen ein Element mitbringt, wird mir statt der style.css das SASS-Module angezeigt, in dem ich meine CSS-Anweisung definiert habe. Das ist ziemlich nett.

Gibt es keine Sourcemap, sehe ich das hier:

Wozu sind Sourcemaps gut?

Sourcemaps helfen bei der Fehlersuche. Ohne Sourcemap muss ich erst Mal herausfinden, aus welchem SASS-Modul eine Anweisung stammt. Liegt eine Sourcemap im Verzeichnis, zeigt mir der Browser in den Dev-Tools automatisch die SCSS-Datei an. Ich kann direkt mit dem Debuggen loslegen.

Sind Sourcemaps nur was für die Entwicklungsumgebung?

Man kann Sourcemaps ohne Weiteres auch für Produktions-Umgebungen einsetzen. Wenn die Sourcemap nicht ständig auf dem Server neu erzeugt wird (was höchst selten der Fall sein dürfte) spricht nichts dagegen. Auch auf Live-Sites muss man ja gelegentlich nach Fehlern suchen.
Hier ein Artikel auf CSS-Tricks dazu.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

2 Kommentare zu “Mit CSS-Sourcemaps SCSS-Dateien in den Dev-Tools anzeigen

  • Hallo Kirsten, ich möchte deinen Artikel noch um eine weitere Info ergänzen: Source-Maps gibt es nicht nur für CSS, sondern auch für JavaScript. Das ist dann hilfreich, wenn das JavaScript für die Ausführung im Web-Browser minifiziert wird oder wenn der Code in TypeScript geschrieben ist und vor der Ausführung im Web-Browser erst einmal nach JavaScript umgewandelt wird.

    • Hallo, Bastian,
      aus dem JavaScript-Zusammenhang kannte ich Sourcemaps, aber den CSS-Bezug hatte ich bisher nicht auf dem Schirm. JavaScript ist nicht Thema hier im Blog, deshalb habe ich’s weg gelassen.

      Kirsten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.