Inspetor de CSS detalhado em todos os sites com CSSPeeper for Chrome

O painel normal do Chrome DevTools é muito poderoso. Ele permite que qualquer um mergulhe fundo em qualquer página para estudar o layout de um site, CSS e até cabeçalhos HTTP, se necessário.

Você pode fazer muito com o inspetor CSS do DevTools. Mas ele não tem um painel de interface gráfica claro e é uma coisa que todo desenvolvedor adoraria.

Confira CSSPeeper, uma extensão gratuita do Chrome que adiciona esse inspetor GUI ao seu navegador. Ele permite que você estude as propriedades CSS de qualquer elemento em qualquer página, embora ele seja criado apenas para o Chrome agora.

Uma vez instalado você apenas visite uma página da Web e clique no botão principal da extensão na barra de complementos do Chrome. Uma nova janela de inspetor aparece na parte superior da página, com detalhes sobre cada elemento principal.

Enquanto navega pelo site, você pode clicar em qualquer elemento que você vê com um contorno pontilhado. Isso pode incluir botões, seções de página, cabeçalhos, itens de navegação, o nome dele.

De lá, você terá um inspetor inteiro com detalhes sobre tipografia, opções de cores e estilos de fonte. É uma ótima maneira de puxe estilos diretamente de uma página da web sem cavar o código CSS você mesmo.

CSSPeeper permite até que você escolha cores relacionadas com um selecionador de cores integrado e gerador de esquema de cores. Você pode exportar imagens de páginas, criar seus próprios esquemas de cores e aplique-os em seus próprios modelos com o Photoshop ou o Sketch.

Eu principalmente recomende esta extensão para designers em vez de desenvolvedores, pois é um plugin muito mais fácil de projetar que extrai CSS bruto e transforma o código em partes de dados fáceis de ler.

Mas este plugin também pode ajudar os desenvolvedores! É realmente um poderosa ferramenta de inspeção de site para todos os tipos de CSS.

Dê uma olhada na página inicial do CSSPeeper para saber mais sobre o que ela pode fazer. A página principal também inclui um link para a loja do Google Chrome, para que você possa instalar a extensão gratuitamente e removê-la para uma execução de teste.