Apply Custom Styles in Google Chrome Web Inspector

Print Page
Love customizing things? Darcy Clarke has shown us a way to skin Google Chrome Web Inspector. Since Chrome’s Web Inspector is basically made of HTML and CSS, you can easily style it to your liking with a bit of CSS magic.
Style Chrome Inspector
Style Chrome Inspector

To add custom styles, you need to modify a file called Custom.css. You can find this file at the following locations on your computer:
Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Ubuntu:
~/.config/chromium/Default/User\ StyleSheets/Custom.css

For the above style, check out this file from Darcy.  He has documented almost all necessary selectors in that, so you can easily modify it and create your own styles.

Some more styles:

IR_Black theme

Style Chrome Inspector
Style Chrome Inspector

Espresso theme

Style Chrome Inspector
Style Chrome Inspector

You can find more selectors at this URL: chrome-devtools://devtools/devTools.css. Just copy-paste it into the address bar of Chrome.

2 thoughts on “Apply Custom Styles in Google Chrome Web Inspector”

Comments are closed.