Inspecionar elemento CSS: veja e copie valores CSS

Você abre o painel Elements no DevTools para encontrar o CSS de um único elemento e dá de cara com uma parede de regras. Um inspetor de CSS faz o contrário. Você aponta para o elemento, e o SuperchargeInspect mostra os estilos que importam: a fonte, as cores e o espaçamento. Você lê os valores e clica em qualquer um deles para copiá-lo. O SuperchargeInspect é uma extensão para visualizar CSS que funciona na própria página em que você está, sem abrir o DevTools.

O que o inspetor de elemento CSS mostra

O painel agrupa tudo em três seções: Tipografia, Cores e Box.

Tipografia. A família da fonte é a pilha de font-family declarada. O painel mostra a primeira família da lista, mas, ao copiar, leva a pilha completa. Essa é a fonte que a página solicita. O painel não verifica qual fonte é de fato renderizada. Ele também mostra o tamanho do texto, o peso e a altura da linha.

Cores. Você vê a cor do texto, a cor de fundo e a cor da borda, quando houver uma. Cores opacas aparecem em hex. Uma cor com transparência parcial aparece como o valor rgba() bruto, e uma totalmente transparente aparece como transparent.

Box. Padding e margin aparecem nos quatro lados. O painel lista o gap, o border-radius e o display. Um diagrama de box model mostra as camadas de margin, border e padding ao redor do conteúdo, com a largura e a altura do conteúdo em pixels CSS.

Como copiar valores CSS

Você copia os valores CSS um de cada vez. Cada valor no painel é um botão. Clique nele e esse único valor vai para a sua área de transferência, para você colar só o padding-top ou só a cor do texto.

Quando quiser o conjunto inteiro, use Copiar só o texto, no menu Mais formas de copiar. Ele inclui a lista completa de estilos observados do elemento: a família da fonte, o tamanho do texto, as cores, o layout, o gap, o padding e a margin de cada lado e o raio.

Esses são os valores computados que a página resolveu para esse elemento. A família da fonte continua sendo a pilha declarada. A cópia não recupera as regras originais do autor, as definições de componentes nem a folha de estilo original. É um retrato do que você vê, não do código que o site escreveu.

DevTools ou um visualizador de CSS

O Chrome DevTools é a ferramenta certa quando você precisa alterar as regras. Lá você edita uma folha de estilo, acompanha a cascata e descobre por que um valor prevalece sobre outro.

Um visualizador de CSS responde a uma pergunta menor. Ele serve para ler e copiar, não para reescrever as regras do site. Você pode inspecionar o CSS sem o DevTools. Aponte para o elemento que quiser e pegue os valores que puder usar. A tabela compara os dois lado a lado.

Use o DevTools para editar e depurar as regras do próprio site. Use um visualizador de CSS para ler um elemento e levar os estilos dele para outra ferramenta.

Navegação pelo teclado

Você pode fazer todo o processo sem tocar no mouse. Pressione Alt+Shift+E para começar. As setas levam ao elemento anterior ou ao próximo. Pressione Ctrl+Up ou Ctrl+Down para ir ao elemento pai ou a um elemento filho. No macOS, use Option+Up e Option+Down.

Pressione Enter para travar o elemento em que você está. Pressione Enter de novo para escrever uma nota e depois Ctrl+Enter (Cmd+Enter no macOS) para Copiar referência. Pressione Esc para voltar à seleção ou fechar o painel. Pressione ? a qualquer momento para abrir uma lista com todos os atalhos.

Tudo fica no seu dispositivo

O SuperchargeInspect roda localmente. Ele não faz nenhuma chamada de rede e não envia nada para lugar nenhum. Não há conta nem coleta de dados em segundo plano.

Os estilos que você inspeciona nunca saem do seu dispositivo. A única coisa que pode sair é um arquivo que você escolhe salvar ou um valor que você cola em outro app. Quando você fecha o navegador, o último elemento que ele lembra é apagado.

Quer passar isso para uma ferramenta de programação? Mostre a uma ferramenta de programação com IA exatamente qual elemento alterar.