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.
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:
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”
Thank you very much !
Very helpful !
Best regards,
Jorg Heihoff,