Ferramentas para desenvolvedores do Chrome: como descobrir o que está substituindo uma regra de CSS?

196

Bem, isso é bem direto. Se as Ferramentas de desenvolvedor do Chrome estão me mostrando que um estilo foi substituído, como ver qual regra de CSS está substituindo-o?

Quero saber se existe algo como "Mostre-me o que substitui isso" .

OBS: Por favor, não me aponte para o Firebug.

— Ramon K.
fonte

Do Chrome Developer Tools também mostrar a regra substituindo

— Zoltan Toth

Respostas:

283

Use o painel Estilo computado do inspetor de elementos. Expanda a propriedade de interesse para ver a lista de regras aplicáveis e qual ganhou.

Captura de tela do Chrome

— josh3736
fonte

Para mim, a guia computada estava aberta por padrão e, portanto, não estava listada como uma guia, ela deveria ter o cabeçalho 'Computado'; caso contrário, você pode estar procurando por um longo tempo.

— MrFox

A técnica mudou um pouco à medida que o Chrome avançou. Em vez de 'Expandir a propriedade de interesse', clique no vidro de espionagem ao lado da propriedade e ele mostrará qual estilo ganhou de volta na guia Estilos.

— Intotecho

@intotecho: o Chrome 47 restaurou o expando na guia Computado desde que a mudança da lupa foi ruim. crbug.com/496263

— josh3736

e se TODOS eles forem cancelados? Provavelmente devido a um script? Como você descobre quem fez isso?

— darkgaze

Ainda está lá como a guia "Computado" no painel Elementos.

— josh3736

Você pode simplesmente olhar para aqueles com o mesmo nome que não estão riscados, lembre-se de que a listagem é importante.

Ou você pode ver os estilos computados. Eles serão os estilos realmente aplicados.

— user1902091
fonte

crtrl + shift + ce inspecione o elemento. Em seguida, encontre o estilo sem uma linha, na caixa no canto inferior direito.

a substituição está na maioria dos casos no topo (e sem uma linha, porque esse estilo é o "vencedor").

— Peter Rasmussen
fonte

Não é o caso quando um estilo está sinalizado como importante!

— JCorriveau