Aug 15, 2011
Skin your Chrome Inspector
Posted in "development"
Update: As of version 32, the Chrome Team have changed the unique ID of the dev tools container. The ID is
#-blink-dev-tools, which changed from the original
#-webkit-web-inspector, understandably. You can thank @paul_irish for the heads up!
With this knowledge, I acquired the help of my good friend Wes Bos. Together we went looking for a way to customize our installs. Luckily enough, the Chromium team have set us up with a nice way of inserting our own CSS.
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css ~Thanks to @VSC
~/.config/chromium/Default/User StyleSheets/Custom.css ~Thanks to @Carlos
The file above is, as it sounds, a CSS file that you can modify and add your own custom styles to. To help you get started, I'm posting my
Custom.css file for you to use. I've documented almost all the selectors so it should be easy to modify. Check it out below:
Note: You can check out more selectors and default CSS by copying + pasting the URL below in to your version of Chrome:
Have fun theming your install, and make sure to post your results back here!
Update: Some people have made some great skins. I especially like Ben Truyman's IR Black theme seen here below. I'll keep adding to this list of skins if you guys keep them coming!