Activer les source maps Sass dans Google Chrome
Si vous utilisez SASS (et vous avez alors tout compris) et êtes un fervent adepte de Google Chrome, alors vous aussi êtes confronté à devoir parfois fouiller votre code pour le débugger. L’inspecteur de Chrome indique le numéro de ligne correspondant à votre style css, mais dans votre fichier CSS et non SCSS. Et ne parlons pas de lorsque votre fichier CSS est minifié…
Comment activer les source maps Sass ?
Si vous utilisez Firefox, le problème peut être résolu en installant l’extension FireSass qui vous permet d’avoir directement le numéro de la ligne et le fichier sass ou scss correspondant au style sélectionné.
Pour Google Chrome (version 24), grâce à un récent commit, l’activation du support des source maps Sass a été rendu possible. Pour activer les sources maps de Sass, suivez les indications suivantes :
- Accéder à l’adresse chrome://flags
- Activer les expérimentations dans les outils de développement (Enable Developer Tools experiments)
- Ouvrez les options de l’outils de développement (CTRL + MAJ + I sur Windows) en cliquant sur la roue situé en bas à droite
- Dans l’onglet « Général », activer les source maps:
Activer les sources maps dans l’onglet « Général »
- Dans l’onglet « Experiments », activer le support pour Sass:
Activer Sass dans l’onglet « Experiments »
- Vérifiez que dans votre fichier config.rb output_style ne soit pas sur « compressed »
- Rajoutez-y la ligne suivante et relancer la compilation du fichier sass (
compass compilesi vous avez compass installé) et votre page web (CTRL+SHIFT+R)
sass_options = { :debug_info => true }
A présent lorsque vous compilerez votre code CSS, vous pourrez voir dans votre fichier CSS compilé, une ligne semblable à celle-ci avant chaque style :
@media -sass-debug-info{filename{font-family:file\:\/
A présent dans l’inspecteur de styles de Google Chrome, vous pourrez voir le nom du fichier sass où est présent le style ainsi que le numéro de sa ligne. Cliquez sur le lien et votre fichier sass s’ouvrira dans une nouvelle fenêtre.
Que pensez-vous de la possibilité maintenant d’activer les source maps Sass, change-t-elle quelquechose dans votre développement ?
Sources
Articles similaires
-
bourbour
-
http://frontenddeveloper.fr/ David Dias
-