Vous êtes développeur ou webmaster ? Vous utilisez Chrome mais vous trouvez le panneau d’outils développeur de Chrome grisâtre et monotone ? J’ai la solution pour vous.
Par défaut, quand on est sur le navigateur Chrome, et qu’on appuie sur F12, on tombe sur ça:
Cliquez sur l’image pour l’agrandir
Bon, quand on code on s’en fiche un peu, mais quand même, au bout d’un moment personnellement j’aime bien varier les thèmes ou changer d’interface, que ce soit pour mon Windows, Gmail ou autre. Par exemple, que diriez-vous d’avoir une console développeur qui ressemble à ça:
Cliquez sur l’image pour l’agrandir
Pas mal non ? Pour parvenir à ce résultat, rien de bien compliqué, il s’agit simplement d’éditer un fichier CSS dans le dossier de Google Chrome. Vous pouvez tout faire à la main, mais des thèmes existent déjà, alors pourquoi ne pas en profiter ?
Choisir Un Thème Chrome DevTools
Pour trouver un thème, vous pouvez tout simplement faire une recherche Google (« Chrome devtools theme »), sinon en voici quelques-uns de sympa à télécharger. À noter que certain thèmes changent seulement la coloration syntaxique du panneau développeur, tandis que d’autres changent complètement l’interface, comme celui que j’utilise.
Voici donc quelques thèmes sympas.
Thème Zero Dark Matrix
Thème Monokai (celui que jutilise)
Thème Tomorrow
Thème Crate
Installation Du Thème
Une fois que vous avez récupéré le contenu du fichier CSS d’un thème, il vous suffit de vous rendre dans le bon dossier.
Si vous êtes sur Mac, rendez-vous dans le dossier
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/.
Si vous êtes sur Windows, rendez-vous dans le dossier
C:UsersVotreNomDUtilisateurAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css, en remplaçant VotreNomDUtilisateur par le votre, bien sûr. Si vous avez installé la version portable de Chrome, alors ce sera dans le sous dossier
X:GoogleChromePortableDataprofileDefaultUser StyleSheets.
Si vous êtes sur Ubuntu, allez dans
~/.config/google-chrome/Default/User StyleSheets.
À l’intérieur de ce dossier vous trouverez un fichier CSS intitulé Custom.css. Ouvrez-le (il est vide) et collez dedans le code du thème choisi. Pas besoin de redémarrer, les changements sont pris en compte immédiatement.