☰

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

tag-icon • tag-icon firefox firefox-extensions firebug
“Mostrar apenas estilos aplicados” no Firefox Web Developer Tool?

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

Ao visitar a página do Firebug, descobri que ele não está mais sendo desenvolvido, o que me surpreendeu.

Agora, para seguir em frente, decidi usar a Web Developer Tool (WDT) que vem integrada no Firefox. Mas parece que falta uma coisa nisso.

No inspetor Firebug, quando seleciono um elemento na página, existe uma opção chamada "Mostrar apenas estilos aplicados" ou algo semelhante. 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?

Raposa de fogo

Responder1

O Firefox DevTools não oferece esse recurso no momento (a partir do Firefox 51.0.1). Por isso criei umrelatório de bug solicitando isso.

Tambem tenhoadicionou uma nota ao guia de migração de usuários do Firebug.

Responder2

Não existe tal opção. No entanto, você pode usarCalculadoguia para exibir apenas os estilos aplicados.

Para fazer isso, você precisa editar ou substituir de alguma forma (por exemplo, para display: none) os estilos padrão das Ferramentas para Desenvolvedores do Firefox:

No arquivo/devtools/client/themes/rules.cssexiste (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 artigotambém pode ser útil.

Responder3

Se você precisarsalvarapenas os estilos aplicados, isso pode ser feito no Chrome usando as Ferramentas do desenvolvedor do Chrome (tutorial aqui). Mas se você quiser uma solução Firefox, poderá salvar a página como um único arquivo .html e, em seguida, obter apenas o CSS desse arquivo.

Para fazer isso, primeiro obtenha a versão Firefox do complementoÚnico arquivo

Após instalar o SingleFile, você pode baixar a página como um arquivo .html e copiar o CSS dentro da <style>tag.

Ele será minificado, então você provavelmente desejará desminificá-lo usando uma ferramenta comoUnminify. com

As pessoas que tentam isso devem estar cientes de que só porque um estilo não éaplicado, não significa que seja necessariamente "não utilizado". Pode haver um script em algum lugar que tentará anexar um determinado estilo a um elemento, mas se não for aplicado no momento da captura, o SingleFile (ou Chrome Dev Tools) não o incluirá. Advertências como essa... Mas para isolar partes específicas de páginas da web e capturar seus conjuntos de regras, essa abordagem pode ser útil.

informação relacionada