Analise os códigos de qualquer site com extensão CSS Dig Chrome

Há muito que você pode fazer com DevTools do Chrome desde a edição de sites ao vivo até o estudo de solicitações HTTP detalhadas. Mas o capacidade de analisar padrões CSS não é cozido no console.

Com Escavação de CSS, você pode analisar tudo Seletores CSS, especificidade, e propriedades únicas de qualquer página da Web diretamente do Chrome. Esta extensão é totalmente gratuita e oferece muita energia para os desenvolvedores frontend.

Ao inspecionar uma folha de estilo, você obterá muitos dados do painel CSS Dig. Pode te mostrar seletores individuais, Incluindo duplicatas e níveis de especificidade desnecessários.

Para começar, simplesmente instalar o plugin e abra a janela do console. Você vai encontrar duas guias na janela CSS Dig: Propriedades e Seletores.

Você pode procurar resultados organizado por propriedades (cor, borda, preenchimento) ou por seletores (classes, IDs). Acho que a janela Propriedades é a mais valiosa, pois permite que você estude quais fontes e cores você está usando.

Esta ferramenta funciona em qualquer site, por isso também é útil para Engenharia reversa design de alguém. Você pode copiar / colar o CSS diretamente desta janela e reutilizá-lo em seus próprios projetos.

Provavelmente, o caso de uso mais comum para o CSS Dig é limpar cores duplicadas da sua paleta de cores. Quantos tons únicos de verde você realmente precisa? Ou quantas fontes sans-serif diferentes são necessárias para uma página?

O CSS Dig é incrivelmente simples, então não espere dezenas de recursos como o DevTools. Em vez disso, este plugin é bastante voltado para desenvolvedores frontend sites de auditoria para seletores repetidos ou propriedades duplicadas.

o Código fonte do plugin está disponível gratuitamente no GitHub, onde você também encontrará todas as Ultimas atualizações.