So verwenden Sie Quellkarten für ein besseres Debugging für Präprozessor

CSS-Präprozessoren sind für die meisten Front-End-Entwickler zu einem unverzichtbaren Werkzeug geworden. Trotz der vielen Vorteile, die sie bieten, stellen Werkzeuge wie LESS, Stylus oder Sass auch neue Probleme dar, von denen wir in diesem Lernprogramm sprechen (und lösen werden).

Das Problem

Wenn Sie nicht an einer kleinen Website mit sehr wenigen Seiten arbeiten, empfiehlt es sich, das Stylesheet in mehrere Module aufzuteilen, oder partials. Zum Beispiel könnten wir die Stile für die Navigation in ihre eigene partielle Datei namens navbar.scss (der Präprozessor, der hier Sass ist) einteilen. Anschließend importieren wir dieses zusammen mit anderen Partials mithilfe von in ein einziges primäres Stylesheet @einführen Direktive, nach der sie in eine einzige CSS-Datei kompiliert werden. Hier beginnt das Problem.

Browser parsen das kompilierte CSS, nicht Ihre Arbeitsdateien, was das Stil-Debugging letztendlich schwieriger macht. Der Debugging-Prozess kann sehr umständlich sein, wenn Sie ein umfangreiches Projekt mit Dutzenden von Stylesheets bearbeiten. Herauszufinden, wo kompilierte Stile entstanden sind, kann fast unmöglich sein.

Wie Sie unten sehen können, verweist der Web-Inspector auf die .css-Datei und teilt uns mit, dass der Stil für Karosserie wird online erklärt 270. Das hilft uns nicht viel, denn in unseren Arbeitsdateien wird es tatsächlich in Scaffolding.Online angegeben 27.

Die Source Map-Lösung

Verwendung einer Quellkarte wird diese kommunalen Stilsprachen überbrücken. Quellkarten sind separat generierte Dateien, die es dem Browser ermöglichen, das kompilierte CSS auf seine ursprüngliche Quelle zurückzuführen. Tatsächlich können Quellkarten in vielen Codierungsumgebungen verwendet werden:

„Quellkarten bieten eine sprachunabhängige Möglichkeit, Produktionscode dem ursprünglich erstellten Code zuzuordnen.“ - Sayanee Basu

Für unsere Zwecke machen Quellkarten das Stil-Debugging mit einem CSS-Präprozessor so vertraut wie das Arbeiten mit normalem CSS. Wie Sie unten sehen können, zeigt der Web-Inspector dank der Quellenzuordnung jetzt die Stilreferenz auf die Originalquelle an.

Generieren einer Quellkarte

Zunächst müssen Sie eine Quellkartendatei (.map) zusammen mit dem generierten CSS generieren. Diese .map-Datei enthält JSON-formatierten Code, der als Referenz zwischen der kompilierten Datei und der Originalquelle dient. Sass fügte die Unterstützung für das Generieren von Quellkarten in Version 3.3 hinzu, LESS fügte sie in Version 1.5.0 hinzu. Informationen zur Stylus-Unterstützung von Quellkarten finden Sie in der Dokumentation.

Jeder hat seine eigenen Vorlieben, wenn es darum geht, die Werkzeuge zu finden, die in seinen Workflow passen. Abgesehen von der nativen Befehlszeilenschnittstelle (CLI), die jeder CSS-Präprozessor bereitstellt, haben wir auch einige andere Optionen wie Grunt und Gulp, sogar Anwendungen wie Codekit.

Verwenden der CLI

Alle Haupt-Präprozessoren können über ihre CLI eine Quellkarte erstellen. 

WENIGER

Mit WENIGER könnten Sie dazu beitragen --Quellkarte so kennzeichnen:

lessc styles.less> styles.css --source-map = styles.css.map

In diesem Beispiel wird styles.less in styles.css kompiliert, während gleichzeitig die Quellkartendatei mit dem Namen "styles.css.map" generiert wird..

Sass

Sass-Benutzer können die --Sourcemap (ohne Bindestrich), um dasselbe zu tun, zum Beispiel:

sass styles.scss: styles.css --sourcemap

Im Gegensatz zu weniger, die --Sourcemap Flag in Sass muss den Dateinamen angeben. Sass benennt die Datei standardmäßig mit demselben Namen wie das kompilierte Stylesheet. Im obigen Beispiel wäre der Name der Quellzuordnung weiterhin "styles.css.map"..

Stylus

Genau wie Sass benötigt der Stylus nur die --Sourcemap flag, oder bietet zusätzlich die Abkürzung -m:

Stift -m styles.styl

Dies gibt uns wieder "styles.css.map".

Verwenden eines Task Runners

Wenn Sie einen Task Runner wie Grunt bevorzugen, verwenden Sie Grunt-Contrib-less, grunt-contrib-sass oder Grunt-Contrib-Stift Um das CSS zu kompilieren, fügen Sie dann die Option zum Generieren der Quellkarte hinzu. Das nachfolgende Beispiel entspricht im Wesentlichen dem vorherigen Beispiel. Es generiert aus unserer Datei styles.less eine Quellenzuordnung mit dem Namen "styles.css.map".

module.exports = function (grunt) grunt.initConfig (less: Optionen: sourceMap: true, sourceMapFilename: styles.css.map), Dateien: 'styles.css': 'styles.less' ); grunt.loadNpmTasks ('grunt-contrib-less'); grunt.registerTask ('default', ['less']); ;

Sass-Benutzer können Grunt-Contrib-Sass verwenden und die Option auf dieselbe Weise einstellen, beispielsweise:

module.exports = function (grunt) grunt.initConfig (sass: Optionen: Sourcemap: 'auto'), Dateien: 'styles.css': 'styles.scss'; grunt.loadNpmTasks ('grunt-contrib-sass'); grunt.registerTask ('default', ['sass']); ;

Anwendungsschnittstelle verwenden

Der einfachste Weg, insbesondere wenn Sie mit der Befehlszeile nicht so vertraut sind, ist die Verwendung einer grafischen Benutzeroberfläche wie Codekit, Prepros oder Koala. Mit der Anwendung ist das Erstellen einer Quellkarte so einfach wie ein Klick.

Die Source Map-Option in Codekit.

Sobald die Quellenzuordnung erfolgreich erstellt wurde, finden Sie eine neue Datei .Karte Die Referenz verweist auf die Quellkartendatei am unteren Rand des kompilierten Stylesheets. Dieser Referenzkommentar sieht normalerweise ein bisschen wie folgt aus:

/ * # sourceMappingURL = style.css.map * /

Quellkarten-Unterstützung in Browsern

Alle aktuellen Browser unterstützen Quellkarten. Safari aktiviert sich automatisch, sobald die Quellkartendatei verfügbar ist, ohne dass eine Konfiguration erforderlich ist. In den anderen Browsern wie Firefox, Chrome und Opera sind die Quellkarten standardmäßig deaktiviert. In diesem Fall müssen Sie die Einstellungen umschalten.

Feuerfuchs

In Firefox ist die Überprüfung der Quellkarten nur über die in Firefox integrierten DevTools verfügbar. Firebug - das einst beliebte Debugging-Add-On für Firefox - hat diese Funktion leider noch nicht hinzugefügt. Starten Sie daher die Firefox DevTools und aktivieren Sie Quellkarten, indem Sie mit der rechten Maustaste auf eine beliebige Stilreferenz klicken und im Kontextmenü die Option "Originalquellen anzeigen" auswählen.

Chrom

Klicken Sie in Chrome (sowie Opera 12 und höher) im Web-Inspector auf das Symbol „Zahnrad“ und stellen Sie sicher, dass dies der Fall ist Aktivieren Sie CSS-Quellkarten wird geprüft.

Sobald die Quellkartendatei erstellt und die Funktion im Browser aktiviert ist, sollten Sie den Inspektor finden, der auf die ursprüngliche Quelle zeigt. In diesem Fall können Sie sehen, dass der Inspektor direkt auf Gerüste verweist.

Einpacken

Mit den leistungsstarken Quellkarten an Ihren Fingerspitzen können Sie kompilierte Stile debuggen, so wie es Webdesigner seit Jahren mit CSS tun. Vergessen Sie nicht, eine Quellzuordnung für Ihr nächstes kompiliertes Stylesheet zu erstellen!