Ocultar estilos herdados nas ferramentas de desenvolvimento

Esta é uma maneira de ocultar rapidamente estilos herdados ao inspecionar elementos nas Ferramentas de Desenvolvimento do Chrome. Isso pode ser incrivelmente útil se você usar o reset de Eric Meyer, o que faz com que muitos estilos sejam exibidos, o que torna difícil discernir rapidamente o que está sendo aplicado a um elemento.

Você precisará editar sua folha de estilo das ferramentas de desenvolvimento, que está localizada em:

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%..LocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css

PC (Windows XP):

C:Documents and SettingsYourUsernameLocal SettingsApplication DataGoogleChromeUser DataDefaultUser StyleSheetsCustom.css

Na folha de estilo, adicione a seguinte regra e salve. As Dev Tools reagirão instantaneamente à mudança.

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

Se quiser reativar os estilos herdados, basta remover ou comentar a linha.