Utiliser l’inspecteur de Chrome pour modifier et sauvegarder vos styles CSS en direct

Dans ce tutoriel, nous verrons comment à partir de l’inspecteur de Google Chrome, modifier et enregistrer en direct les modifications CSS de votre site installé en local. Au final, nous verrons comment appliquer la même méthode pour votre thème WordPress.

Pourquoi travailler dans l’inspecteur

Mais qu’est-ce que l’inspecteur?

L’inspecteur du navigateur Google Chrome est un outil intégré par défaut. C’est un prolongement de l’extension Firebug, conçue initialement pour Firefox.

Dans un article plus ancien, je décris l’utilisation basique d’un inspecteur Web. Si cet outil ne vous était par familier, je vous invite à relire ce tutoriel avant d’aller plus loin.

Pourquoi l’utiliser

Pour mettre en place et corriger les CSS, je passe quasiment 95% de mon temps dans l’inspecteur, et ce pour plusieurs raisons:

• La compréhension du CSS est facilitée en inspectant chaque élément. Le style correspondant s’affiche automatiquement en cascade.
• Nous voyons en direct ce qui se passe quand on apporte des corrections. Il n’est pas nécessaire de recharger la page du navigateur.
• L’enregistrement se fait en direct ou non en fonction de l’onglet utilisé dans l’inspecteur.
• Si vous travaillez avec Git, le changement de branche applique en direct les modifications sans rafraîchir la page du navigateur.
• Des outils d’édition avancés ont été ajoutés: sélection et correction des couleurs, correction des ombres, correction des effets de transitions, ajustement des animations….
• Des outils dédiés pour afficher les versions mobiles sont à notre disposition.

Configuration de Chrome

Persistence 2.0 depuis la version 63 de Chrome

Depuis la version 63 de Chrome, il n’y a rien à activer. La fonctionnalité Persistence 2.0 est nativement installée dans l’inspecteur. Pour les versions plus anciennes de Chrome, voir les réglages qui suivent.

Activation de Persistence 2.0 avant la version 63 de Chrome

Dans cet article, j’utilise une fonctionnalité expérimentale de Chrome. Pour l’activer, vous devez suivre les étapes suivantes:

• Bien vérifier que le cache n’est pas activé; avec l’inspecteur ouvert, dans l’onglet Network, cocher la case disable cache.
• Copier la ligne qui suit les deux points: chrome://flags/#enable-devtools-experiments.
• Coller cette même ligne dans le champ URL de Chrome et appuyer sur la touche entrée pour valider.
• Vous vous retrouvez dans les réglages avancés de Chrome et vous devez activer la fonctionnalité.
• Redémarrez Chrome.
• Ouvrir l’inspecteur et se rendre dans les réglages, à l’onglet “Experimental”.
• Cocher la case: Persistence 2.0.
• Redémarrez Chrome.
• Aller boire un verre d’eau.

Quelques captures pour vous aider

Voici en image les étapes à suivre pour configurer Chrome.

Ajouter le dossier de votre site

L’objectif ici est de pouvoir modifier en direct les CSS de son site, tout en les enregistrant automatiquement dans les fichiers sources.

Les prés requis

Pour pouvoir modifier en direct tous ces fichiers, nous devons respecter ces points suivants:

• Travailler sur une installation de site installée localement (MAMP, WAMP ou autre outil) sur votre ordinateur.
• Votre site statique installé en local ne doit pas être ouvert en double cliquant directement sur le fichier HTML. Dans le champ URL de votre navigateur, vous devez avoir une URL de type http://local... et non un chemin de type file///chemin-vers-mon-fichier. Pour ce dernier cas, l’enregistrement en direct fonctionnera très mal.
• Faire le lien entre l’inspecteur de Chrome et le dossier de votre site.

Faire le lien avec le dossier

L’étape suivante est d’ouvrir son site local dans le navigateur de l’inspecteur à partir de n’importe quel élément. Les outils de développement affichent plusieurs onglets. Dans celui qui s’appelle Source, un nouveau sous-onglet apparaît Filesystem. Une fois activé, vous pouvez ajouter un dossier à votre espace de travail. Nous allons dans notre cas, choisir le dossier de notre site.

Une fois le dossier choisi, Chrome vous demande en haut de pouvoir écrire dans ce dossier. Il faut cliquer sur Accepter.

Normalement, un voyant vert apparaît à côté du fichier style.css. Cela nous indique que le fichier est connecté. Les modifications effectuées sur celui-ci seront validées dans les deux sens sans avoir à rafraîchir la page:

• quand j’enregistre dans l’inspecteur, mon fichier source en CSS est modifié automatiquent sans avoir besoin de l’enregistrer
• si je modifie dans un éditeur de code le fichier source en CSS, il est mis à jour automatiquement dans l’inspecteur.

S’il le voyant vert n’apparaissait pas, il suffit la plupart du temps de rafraîchir la page avec le raccourci commande + R sur mac (CTRL + R sur PC).

Quelques captures pour vous aider

Voici en image les étapes à suivre pour ajouter le dossier de votre projet.

Modifier les CSS

Une fois que le dossier du site a été ajouté à l’espace de travail, deux solutions se présentent à vous pour éditer les CSS. Attention, avant de travailler, veillez à bien vérifier que le voyant vert est présent à côté du nom du fichier.

Travailler dans l’onglet Elements

Attention, ici c’est du direct; les changements sont enregistrés automatiquement dans le fichier original.

Si vous devez ajouter de nouvelles règles CSS, je vous recommande de passer par la méthode qui suit avec l’onglet Sources. Dans le cas contraire, les nouvelles règles CSS seront ajoutées provisoirement dans l’inspecteur.

Travailler dans l’onglet Sources

L’édition des fichiers se passe par l’onglet Sources de l’inspecteur. Vous pouvez accéder directement à l’emplacement qui concerne vos modifications en cliquant dans l’inspecteur sur le lien du fichier à droite de la règle trouvée au moment de l’inspection. Cela va vous renvoyer à l’onglet Sources.

Une fois dans le fichier, vous pouvez ajouter une nouvelle règle CSS. Dans cette partie de l’inspecteur, une fois les modifications faites, il faut sauvegarder pour que ça s’applique. Un astérisque à côté du nom de fichier indique qu’il n’a pas été enregistré.

Quelques captures pour vous aider

Voici en image l’onglet Elements et l’onglet Sources.

Configuration WordPress

Pour un thème WordPress, le lien est fait automatiquement vers un fichier style.css. Parfois, certains thèmes ajoutent d’autres fichiers CSS dans des dossiers dédiés.

Installer et activer cette extension personnelle qui retire les numéros de version à la fin des fichiers CSS. Ces numéros de type style.css?version.... peuvent perturber l’inspecteur pour retrouver le bon chemin vers votre fichier.

La modification des styles se fait exactement comme dans un site statique. Vous éditez en direct le fichier style.css

Vidéo qui résume tout

Si vous ne voyer par la vidéo, allez sur l’article directement.

Liens

Voici une série de liens en rapport plus ou moins directs avec l’article. La plupart sont en anglais.

• Edit Styles. Article de base qui décrit bien l’utilisation complète de l’inspecteur pour les CSS.
• Set Up Persistence with DevTools Workspaces. Article pour configurer un espace de travail local.
• Set Up CSS and JS Preprocessors
• Inspect and Edit Pages and Styles  |  Web  |  Google Developers
• Can I save CSS style changes from the Google DevTools Element > Styles tab, or must I go to the Sources tab? – Stack Overflow. Bien voir les réglages précis qui sont donnés pour Canary
• Trying to persist CSS changes to file on disk in Chrome Dev tools – Stack Overflow. Bonne ressource pour ajuster les réglages.