CSS Inspector

Seja para depurar um problema de layout, fazer engenharia reversa de um design que você admira ou simplesmente conferir valores de espaçamento e tipografia, o CSS Inspector oferece tudo o que você precisa em um painel flutuante limpo. Diferente do DevTools do navegador, ele não atrapalha o seu fluxo — sem painéis fixos, sem viewport redimensionado. Basta passar o mouse, clicar e inspecionar. A ferramenta mostra os estilos computados (o que o navegador realmente renderiza), não apenas o CSS escrito. Isso significa que você vê os valores reais depois que herança, especificidade e cascata já foram resolvidas — os mesmos valores que afetam o que os usuários veem na tela.

Inspecionar um elemento nunca dispara reflow ou repaint da página, então você pode explorar livremente sem se preocupar em bagunçar a posição de rolagem, animações ou o estado do JavaScript. Pseudo-elementos como ::before e ::after também são suportados — passe o mouse sobre o elemento pai e o painel mostra os estilos do conteúdo gerado separadamente dos estilos do próprio elemento. Propriedades CSS customizadas (variáveis) são resolvidas para seu valor computado final, mas o painel também mostra o nome da variável que gerou esse valor, para que você consiga rastrear uma cor ou um espaçamento até sua origem no design token, em vez de ver apenas um número de pixel bruto.

No dia a dia, a maioria dos desenvolvedores recorre ao CSS Inspector dezenas de vezes por sessão — para entender por que uma margem colapsou, confirmar um código hexadecimal antes de copiá-lo para uma stylesheet, ou verificar se um breakpoint de media query realmente aplicou os estilos que deveria. Por ser um painel flutuante em vez de um modo que ocupa o navegador inteiro, você pode deixá-lo aberto enquanto troca de aba para conferir seu editor de código ou um arquivo de design, e voltar direto ao mesmo elemento sem perder o lugar.