O SuperchargeInspect abre em qualquer página e permite que você escolha qualquer elemento e leve com você. Passe o mouse e clique, ou navegue com as setas do teclado e fixe com Enter. A sobreposição desenha o box model direto na página, e o painel mostra a fonte, as cores e o espaçamento. Com uma só cópia, o texto e um snapshot limpo vão para a sua área de transferência, com uma nota, se quiser.
Escolha com o mouse, ou navegue com as setas e fixe com Enter
A sobreposição desenha o padding, a margin e a content box direto na página
Fonte, tamanho, peso, espaçamento entre letras, cores e box model de cada elemento
Qualquer valor é copiado com um clique
Copie uma referência completa: texto mais um snapshot PNG limpo em um só item
Notas de até 1200 caracteres vão junto na referência e no rodapé da imagem
Shadow roots, slots, SVG e iframes de mesma origem podem ser selecionados
Abra qualquer página e pressione Alt+Shift+E, ou clique no ícone da barra de ferramentas. Navegue com as setas, fixe um elemento com Enter e copie uma referência completa com um clique.
Selecionando elementos
Dois jeitos de começar: passe o mouse e clique, ou fique no teclado. As setas para a esquerda, para cima, para a direita e para baixo navegam entre os elementos, Ctrl+Seta para cima (Option+Seta para cima no Mac) vai para o elemento pai e Ctrl+Seta para baixo (Option+Seta para baixo) vai para um filho. Enter fixa o elemento, Esc volta um passo e ? mostra a lista de atalhos. O seletor alcança shadow roots, slots, SVG e iframes de mesma origem.
Veja o box model na página
Quando você seleciona um elemento, ele é desenhado direto na página. Padding e margin ficam sombreados, a caixa de conteúdo ganha um contorno e um anel com alças âmbar marca o elemento fixado. O contorno segue o próprio border-radius do elemento, então um elemento arredondado continua arredondado.
Leia tudo no painel
O painel mostra o elemento por completo: família, tamanho, peso e espaçamento entre letras da fonte, com uma prévia ao vivo na própria fonte do elemento. As cores do texto, do fundo e da borda aparecem como amostras de cor, e o diagrama do box model cobre margens, bordas, padding, raio, display e gap. Qualquer bloco de valor é copiado com um clique. Acima fica uma trilha de elementos pais, e você pode encaixar o painel à esquerda ou à direita.
Notas
Adicione uma nota de texto livre, com até 1200 caracteres. Ela vai para a referência copiada e para o rodapé da imagem capturada, então o que você notou segue junto.
Copie uma referência
A opção Copiar coloca uma referência completa na área de transferência como um único item: texto e uma captura PNG limpa juntos. O texto inclui a nota, a URL de origem, o título da página, a data e hora, a tag e o localizador do elemento, seu texto visível, a viewport e os limites, os estilos observados e um trecho limpo do código do elemento. Ele omite valores de formulários e partes ocultas da página, e quaisquer parâmetros de credenciais na URL são ocultados. Você também pode copiar só o texto, só a imagem ou salvar o PNG como arquivo.