Customisation de l’inspecteur d’élément de Google Chrome

Google_Chrome_2011_Logo.jpg

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 :
origine.jpg

En quelque chose de beaucoup plus personnalisé :
custom.jpg

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.