“Mostrar apenas estilos aplicados” no Firefox Web Developer Tool?

Question

Sou usuário do Firebug há muito tempo. Meu Firefox foi atualizado para 51 muito recentemente e comecei a ter problemas com o Firebug em breve.

Ao visitar a página do Firebug, descobri que ela não está mais sendo desenvolvida, o que foi um choque para mim.

Agora, para seguir em frente, decidi usar o Web Developer Tool (WDT) que vem integrado com o Firefox. Mas parece que falta uma coisa.

No inspetor do Firebug, quando seleciono um elemento na página, usei uma opção chamada "Mostrar apenas estilos aplicados" ou algo similar. Isso parece estar faltando no WDT e é feio ver todos os estilos CSS riscados no painel.

Existe uma maneira de ter esse recurso no WDT?

    

Answer 1

O Firefox DevTools não oferece esse recurso no momento (como no Firefox 51.0.1). Por isso, criei um relatório de erros solicitando .

Além disso, eu adicionei uma nota ao guia de migração de usuários do Firebug .

    

Answer 2

Nenhuma opção existe. No entanto, você pode usar a guia Computed para exibir somente estilos aplicados.

Para fazer isso, você precisa editar ou sobrescrever (por exemplo, display: none ) os estilos padrão das Ferramentas de Desenvolvedor do Firefox:

No arquivo /devtools/client/themes/rules.css existe (linha 423):

.ruleview-overridden {
  text-decoration: line-through;
}

linha 268:

.theme-firebug .ruleview-overridden .ruleview-propertyname,
.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
  text-decoration: line-through;
}

Este artigo também pode ser útil.