Last Updated: February 25, 2016
· noahblon

Hide inherited Styles in Dev Tools

This is a way to quickly hide inherited styles when inspecting elements in the Chrome Dev Tools. This can be incredibly useful if you use Eric Meyer's reset, which causes many styles to display that make it difficult to quickly discern what is being applied to an element.

You'll need to edit your dev tools stylesheet, which is located at:


~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css

Ubuntu (Google Chrome):

~/.config/google-chrome/Default/User\ StyleSheets/Custom.css

Ubuntu (Chromium):

~/.config/chromium/Default/User\ StyleSheets/Custom.css


%APPDATA%\..\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

PC (Windows XP):

C:\Documents and Settings\YourUsername\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

In the stylesheet, add the following rule and save. Dev Tools will instantly react to the change. { display: none; }

If you want to turn inherited styles back on simply remove or comment the line out.

1 Response
Add your response

@gespinha: Thanks for the reply, you are correct. However, I find it helpful to turn them off in the styles tab for my workflow which is mostly done in the browser. Would be nice to see the ability to hide them there as well. Regardless, styling the dev tools is cool!

over 1 year ago ·