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:

Mac:

~/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

PC:

%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.

.styles-section.show-inherited { display: none; }

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