CSS Dig, uma extensão chrome para analisar folhas de estilo

Postado em

Se trabalha desenhando ou fazendo manutenção em sites, provavelmente, passa muito tempo analisando e alterando folhas de estilo (arquivos .css). Hoje apresentamos uma extensão que poderá lhe ajudar a fazer esse trabalho de forma muito mais simples: cssdig.com.

Disponível só para Chrome, agrupa todos os arquivos css, mostrando detalhes da informação em um único painel, com três possíveis visualizações:

Resumem

Para conhecer as páginas CSS as quais faz referência. Em caso de não poder se obter o conteúdo de algum deles, será indicado nesta página, onde também será possível selecionar ou eliminar folhas específicas.

Propriedades

Para ver as características agrupadas de todos os arquivos CSS indicados antes. Em duas colunas é possível analisar rapidamente as propriedades e os valores associados.

Detalhes

Para ver a origem de uma propriedade específica. Sé é preciso indicar o que estamos buscando para obter os lugares aos que se referem os arquivos css (na imagem pode ver um exemplo com cores: indicamos a cor azul e vemos os lugares referentes a esta cor dentro dos arquivos CSS).

Como pode ver, é muito mais fácil analisar uma folha de estilo usando CSS Dig que as ferramentas já existentes no próprio Chrome.