L’inspecteur d’éléments de Chrome fait partie des outils indispensables aux intégrateurs/développeurs qui utilisent le navigateur de Google pour leurs tests de rendu.
Sur la lancé de Firefox et de son excellent Firebug, les principaux navigateurs ont développé à leur tour (et avec plus ou moins de réussite…) leurs propres outil de débogage.
Nous allons nous concentrer sur l’inspecteur d’éléments de Chrome et voir comment customiser son interface qui à l’origine est comme ceci :
En quelque chose de beaucoup plus personnalisé :
Le fonctionnement :
Rendez-vous dans un premier temps sur le Github d’Anilkabobo.
Faire ensuite un copier-coller du CSS directement dans le fichier Custom.css que vous trouverez sur un environnement Windows en suivant ce chemin :
Pensez à remplacer « Administrateur » par le nom de votre machine et à afficher vos dossiers cachés.
C:\Users\Administrateur\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
Et ici sur un environnement MAC :
Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css
La nouvelle feuille de styles sera prise en compte immédiatement, pas besoin de redémarrer votre navigateur.
Libre à vous de modifier le CSS comme vous le souhaitez.