Print de um elemento com nota para sua IA de programação

Você quer uma imagem de um botão ou card, não da tela inteira, e não quer recortar à mão. O SuperchargeInspect é uma extensão que captura um único elemento e adiciona sua nota, para que a ferramenta de programação com IA entenda o que você quer dizer. Aponte para o elemento, trave-o com Enter e copie ou salve um PNG recortado nesse elemento. O recorte vem da parte visível da aba, pronto para colar em uma ferramenta de programação com IA, em um chat ou em um ticket.

Três formas de copiar a imagem do elemento

O elemento travado oferece três ações. Duas ficam no menu Mais formas de copiar. A terceira é o próprio botão Copiar referência.

Copiar só a imagem e Salvar PNG entregam o recorte limpo, sem rodapé. Copiar referência é o print anotado do elemento: um único item na área de transferência com a referência em texto e o PNG. Se o elemento ainda não estiver travado, Ctrl+Enter (Cmd+Enter no macOS) trava e copia em uma só etapa.

O que o print anotado de um elemento mostra

Copiar referência renderiza o recorte visível sobre um fundo branco, redimensionado para caber em 1600 x 1200, e adiciona abaixo dele um rodapé com linhas rotuladas. As linhas são Sua nota, Origem, Elemento e Estilos. Origem é o endereço da página. Elemento é o localizador do elemento. A linha Estilos traz a primeira font-family, o font-size e a line-height, o font-weight, a cor do texto sobre o fundo em hex, o padding e o border-radius.

É esse rodapé que transforma a imagem em um print com referência CSS: ele traz sua nota e os principais estilos, então a imagem se explica sozinha para uma ferramenta de programação com IA. Quando você cola a imagem em um chat, em um ticket ou em uma ferramenta de programação com IA, quem lê não precisa abrir a página para ver o que você apontou.

Como escolher o elemento certo

Inicie uma inspeção com Alt+Shift+E. Passe o mouse pela página, ou use as setas do teclado, até chegar ao elemento que você quer. Para tirar print de um único elemento e de mais nada, pare no menor elemento que contém o que você quer mostrar. Para pegar o card inteiro em vez de um único rótulo, pressione Ctrl+Seta para cima (Option+Seta para cima no macOS) para ir ao elemento pai. Vá para um elemento filho com Ctrl+Seta para baixo (Option+Seta para baixo no macOS). Pressione Enter para travar o elemento e depois copie a imagem.

Só a parte do elemento que está na tela entra na imagem, então role a página até o elemento ficar visível antes de capturá-lo.

O print fica no seu dispositivo

O recorte é feito no seu dispositivo, a partir da parte visível da aba. A extensão não faz nenhuma requisição de rede, não tem conta e nada do que você inspeciona é enviado a qualquer servidor. A imagem só sai do seu dispositivo quando você a salva com Salvar PNG ou a cola em outro app. A partir daí, quem cuida dela é esse app.

Envie o print anotado com uma nota para uma ferramenta de programação com IA.