Comment utiliser les cartes source pour améliorer le débogage des préprocesseurs

Les pré-processeurs CSS sont devenus un outil indispensable pour la plupart des développeurs front-end. Cependant, malgré les nombreux avantages qu’ils offrent, utiliser des outils tels que LESS, Stylus ou Sass pose également de nouveaux problèmes, dont nous allons parler (et résoudre) dans ce tutoriel..

Le problème

Sauf si vous travaillez sur un petit site Web comportant très peu de pages, il est courant de diviser la feuille de style en plusieurs modules. partiels. Par exemple, nous pourrions séparer les styles de navigation dans leur propre fichier partiel nommé navbar.scss (le préprocesseur étant ici Sass). Ensuite, nous importons cela, ainsi que d’autres partiels, dans une seule feuille de style primaire en utilisant le @importation après quoi ils seront compilés dans un seul fichier CSS. C'est là que le problème commence.

Les navigateurs analysent le CSS compilé, et non vos fichiers de travail, ce qui rend le débogage de style plus difficile. Le processus de débogage peut être très fastidieux si vous gérez un projet à grande échelle avec des dizaines de feuilles de style à gérer. Déterminer d'où proviennent les styles compilés peut être presque impossible.

Comme vous pouvez le voir ci-dessous, l’inspecteur Web fait référence au fichier .css, nous indiquant que le style du corps est déclaré en ligne 270. Cela ne nous aide pas beaucoup, car dans nos fichiers de travail, il est en fait déclaré dans scaffolding.less on line 27.

La solution de carte source

Utilisant un carte source reliera ces langues de style communal. Les cartes sources sont des fichiers générés séparément qui permettent aux navigateurs de retracer le code CSS compilé jusqu'à sa source d'origine. En réalité, les cartes sources peuvent être utilisées dans de nombreux environnements de codage:

«Les cartes source offrent un moyen indépendant de la langue de mapper le code de production avec le code original créé.» - Sayanee Basu

Pour nos besoins, les cartes source rendent le débogage de style avec un préprocesseur CSS aussi familier que le travail avec CSS simple. Comme vous pouvez le voir ci-dessous, l'inspecteur Web affiche maintenant la référence de style à la source d'origine, grâce à la carte source.

Générer une carte source

Pour commencer, nous devons d’abord générer un fichier de carte source (.map) avec le CSS généré. Ce fichier .map contient du code au format JSON qui sert de référence entre le fichier compilé et la source d'origine. Sass a ajouté le support pour la génération de cartes source dans la version 3.3, MOINS l'a ajouté dans la version 1.5.0 et vous pouvez également trouver des informations sur le support de Stylus dans les cartes sources dans la documentation..

Chacun a sa propre préférence lorsqu'il s'agit de choisir les outils adaptés à son flux de travail. Outre l’interface de ligne de commande (CLI) native fournie par chaque préprocesseur CSS, nous disposons également de quelques autres options telles que Grunt et Gulp, voire d’applications telles que Codekit..

Utiliser la CLI

Tous les préprocesseurs principaux ont la possibilité de créer une carte source via leur interface de ligne de commande.. 

MOINS

Avec MOINS, vous pourriez inclure --carte source signaler de cette façon:

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

Cet exemple compile styles.less dans styles.css, tout en générant le fichier de carte source portant le nom défini sur «styles.css.map»..

Toupet

Les utilisateurs de Sass peuvent utiliser le --carte source (sans le trait d'union) pour faire la même chose, par exemple:

sass styles.scss: styles.css --sourcemap

Contrairement à LESS, le --carte source flag dans Sass a besoin de nous pour spécifier le nom du fichier. Sass nommera le fichier avec le même nom que la feuille de style compilée par défaut. Donc, étant donné l'exemple ci-dessus, le nom de la carte source serait toujours “styles.css.map”.

Style

Comme Sass, Stylus ne nécessite que le --carte source drapeau, ou offre en plus la sténographie -m:

stylet -m styles.styl

Encore une fois, cela nous donne "styles.css.map".

Utiliser un coureur de tâches

Si vous préférez utiliser un gestionnaire de tâches tel que Grunt, utilisez grunt-contrib-less, grunt-contrib-sass ou grunt-contrib-stylus pour compiler le CSS, puis inclure l'option permettant de générer la carte source. L'exemple ci-dessous fait effectivement la même chose que nous avons fait dans l'exemple précédent; il génère une carte source nommée «styles.css.map» à partir de notre fichier styles.less.

module.exports = fonction (grunt) grunt.initConfig (less: options: sourceMap: true, sourceMapFilename: styles.css.map, fichiers: 'styles.css': 'styles.less' ) grunt.loadNpmTasks ('grunt-contrib-less'); grunt.registerTask ('default', ['moins']); ;

Les utilisateurs de Sass peuvent utiliser grunt-contrib-sass et définir l’option de la même manière, par exemple:

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

Utiliser une interface d'application

Le moyen le plus simple, en particulier si vous n'êtes pas à l'aise avec la ligne de commande, consiste à utiliser une interface graphique telle que Codekit, Prepros ou Koala. Avec l'application, créer une carte source est aussi simple qu'un simple clic.

L'option Carte source dans Codekit.

Une fois la carte source créée avec succès, vous trouverez un nouveau fichier. .carte ainsi que la référence pointant vers le fichier de carte source au bas de la feuille de style compilée. Ce commentaire de référence ressemblera généralement un peu à:

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

Prise en charge de la carte source dans les navigateurs

Tous les derniers navigateurs prennent en charge les cartes sources. Safari s'active une fois que le fichier de carte source est disponible, sans nécessiter de configuration. Dans les autres navigateurs tels que Firefox, Chrome et Opera, les cartes sources peuvent être désactivées par défaut, auquel cas vous devrez changer les paramètres..

Firefox

Dans Firefox, l'inspection de la carte source est uniquement disponible via les outils DevTools intégrés à Firefox. Firebug - l'add-on de débogage jadis populaire pour Firefox - n'a pas encore ajouté cette fonctionnalité, malheureusement. Par conséquent, lancez Firefox DevTools et activez les cartes sources en cliquant avec le bouton droit de la souris sur une référence de style et en sélectionnant "Afficher les sources originales" dans le menu contextuel..

Chrome

Sous Chrome (et Opera 12 et plus), cliquez sur l’icône «engrenage» dans l’inspecteur Web et assurez-vous que Activer les cartes source CSS est vérifié.

Une fois le fichier de carte source créé et la fonctionnalité du navigateur activée, l'inspecteur doit pointer vers la source d'origine. Dans ce cas, vous pouvez voir que l'inspecteur fait directement référence à scaffolding.less.

Emballer

Désormais, avec la puissance des cartes source à portée de main, vous serez en mesure de déboguer les styles compilés, comme le font les concepteurs Web avec CSS depuis des années. Alors, n'oubliez pas de générer une carte source pour votre prochaine feuille de style compilée!