Apply Custom Styles in Google Chrome Web 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

Espresso theme

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.

Tweet

Related posts:

1. Apply Ubuntu Theme to Google Navigation Bar
2. Edit Default Google Chrome Keyboard Shortcuts, or Create Custom Ones
3. Create Custom Search Engine of Any Website in Google Chrome
4. Add Google+ Search to Chrome
5. Set Favorite Websites & Custom Background Image on Chrome New Tab Page