Inspetor de página
Analise qualquer página web ao vivo — fontes, cores, imagens e SVGs. Funciona como bookmarklet em qualquer site.
Demonstração ao vivo — isto analisou esta página. Instale o bookmarklet abaixo para inspecionar qualquer site.
Analisando esta página…
Usar em qualquer página (bookmarklet)
Quer usar Inspetor de página sem sair da página em que está? Arraste o botão abaixo para a sua barra de favoritos e clique nele em qualquer site para abrir Inspetor de página ali mesmo — roda inteiramente no seu navegador.
Use com responsabilidade: Um bookmarklet roda na página em que você o clica. Evite sites sensíveis como bancos online, pagamentos ou saúde — você o usa por sua conta e risco. Tudo é processado localmente e nenhum dado é enviado. Veja nossos Termos.
- Mostre a barra de favoritos se estiver oculta — Ctrl+Shift+B (⌘+Shift+B no Mac).
- Arraste o botão acima para a barra de favoritos.
- Abra qualquer site e clique no favorito — o painel do Inspetor de página aparece no canto superior direito. Use ✛ para trocar de canto e ›/‹ para recolhê-lo na borda e puxá-lo de volta.
- Clique no favorito de novo (ou no ✕) para fechar.
Obs.: alguns sites com políticas de segurança rígidas podem bloquear bookmarklets.
Exemplos
Identificar as fontes de um site
Entrada
Clique no bookmarklet em qualquer página → aba Fontes
Saída
Inter — 400/600/700 · 142× Roboto Mono — 400 · 18×
Extrair a paleta de cores
Entrada
Aba Cores
Saída
#111827 · 308 #2563EB · 47 #F9FAFB · 22 (clique para copiar hex)
Listar imagens com formato e tamanho
Entrada
Aba Imagens
Saída
logo.svg — SVG hero.webp — WEBP · 1600×900
Sobre esta ferramenta
O Inspetor de página é um analisador de páginas web gratuito que revela como qualquer site ao vivo é construído: as fontes que ele renderiza, sua paleta de cores, cada imagem e SVG em linha, seus links e uma visão técnica rápida. Ele roda inteiramente no seu navegador sem upload, então é uma forma rápida e privada de encontrar fontes em um site, extrair cores, auditar imagens ou pegar um ícone SVG — seja você um designer fazendo engenharia reversa de um layout, um desenvolvedor depurando ou só curioso.
Como usar
- Experimente a demonstração ao vivo acima — ela analisa esta própria página nas abas Visão geral, Fontes, Cores, Imagens, SVG e Links.
- Para inspecionar qualquer outro site, arraste o botão Inspetor de página abaixo para a sua barra de favoritos.
- Abra qualquer site e clique no favorito — um painel abre por cima.
- Troque de aba para ler suas fontes, copiar cores hex, abrir imagens ou copiar a marcação SVG em linha.
O que ele inspeciona
- Fontes — as famílias de fontes de fato renderizadas, com pesos e itálicos, ordenadas por uso.
- Cores — cores de texto, fundo e borda como hex, ordenadas por frequência para que as de marca apareçam primeiro.
- Imagens — cada <img> mais as imagens de fundo CSS, com formato e dimensões naturais.
- SVG — ícones SVG em linha com pré-visualização e cópia da marcação em um clique.
- Links — todos os links divididos em internos e externos.
- Visão geral — título, meta descrição, canonical, número de nós DOM, número de scripts/folhas de estilo e tamanho HTML aproximado.
Como ele lê a página renderizada, relata as fontes e cores que os usuários de fato veem, não só o declarado numa folha de estilo. Para construir as tags SEO que ele revela, combine-o com o Gerador de meta tags.
Uso responsável
O Inspetor de página é uma ferramenta de desenvolvimento e aprendizado para analisar a estrutura, os estilos e a mídia de uma página — as mesmas informações que as ferramentas de desenvolvedor integradas do seu navegador já expõem. Ele não copia, armazena nem redistribui conteúdo: imagens e vídeos abrem em uma nova aba, e o código SVG é mostrado apenas para inspeção. Todas as imagens, vídeos e SVGs que você vê continuam propriedade de seus donos originais (o site e seus autores). Você é o único responsável por como usa o que ele revela; não reutilize ativos protegidos por direitos autorais sem permissão. Consulte nossos Termos de uso.
Perguntas frequentes
O que o Inspetor de página mostra?
Ele analisa uma página web ao vivo e lista suas fontes (com pesos), as cores usadas para texto, fundos e bordas, cada imagem (com formato e dimensões), os SVGs em linha, os links (internos vs externos) e uma visão geral rápida — título, descrição, número de nós DOM, tamanho HTML e mais.
Como inspeciono outro site, não só este?
Arraste o botão do Inspetor de página para a sua barra de favoritos, abra qualquer site e clique no favorito. Um painel abre sobre aquela página mostrando suas fontes, cores, imagens, SVGs e links. A demonstração desta página executa exatamente a mesma análise na página que você está lendo agora.
Preciso instalar uma extensão?
Não. É um bookmarklet — um favorito normal cujo endereço é um pequeno trecho de JavaScript. Não há nada a instalar nem permissões a conceder; ele só roda quando você clica, e apenas na aba que está vendo.
Ele encontra as fontes que um site usa?
Sim. Ele lê a font-family computada de cada elemento de texto, então relata as fontes de fato renderizadas na tela (não só as declaradas no CSS), junto com os pesos e se itálicos são usados. É uma forma rápida de identificar a tipografia de qualquer site.
Ele pode extrair a paleta de cores de uma página?
Sim. Ele coleta as cores de texto, fundo e borda de cada elemento, converte para hex e ordena por frequência de aparição, para que as cores de marca dominantes subam ao topo. Clique em qualquer amostra para copiar seu código hex.
Meus dados são enviados a algum lugar?
Não. Tudo roda localmente no seu navegador — o inspetor só lê a página em que você está e nunca envia nada a um servidor. Sem cadastro e completamente grátis.
Por que algumas imagens ou cores estão faltando?
O inspetor lê o DOM renderizado, então imagens carregadas de forma preguiçosa abaixo da dobra, conteúdo dentro de iframes de origem cruzada ou estilos aplicados após um clique podem não aparecer até estarem na página. Escaneie novamente após rolar ou interagir para captá-los.