Como saber qual tecnologia um site usa: o método em 10 minutos e o que fazer com a resposta

Para saber qual tecnologia um site usa, instale a extensão Wappalyzer ou consulte o endereço no BuiltWith: em segundos você tem CMS, framework e bibliotecas. Depois abra o DevTools do navegador na aba Rede e confirme o que carrega de verdade: scripts, fontes, modelos 3D e animações. A tabela de sinais abaixo diz como reconhecer cada tecnologia no código.

Quais ferramentas mostram a tecnologia de um site em um clique?

Duas resolvem a maior parte dos casos: a extensão Wappalyzer, que lê a página aberta no navegador, e o BuiltWith, que consulta um endereço pelo site. As duas listam CMS, framework, bibliotecas JavaScript, fontes, ferramentas de análise e hospedagem. A diferença está em como cada uma olha.

A Wappalyzer tem extensão para Chrome, Firefox, Edge e Safari e detecta a tecnologia a partir do que o navegador carregou. A conta grátis dá 50 consultas por mês pelo site, e os planos pagos começam em US$ 250 por mês, segundo a página de preços, consultada em outubro de 2026. O BuiltWith mantém a consulta individual de site grátis para sempre; os planos de US$ 295 a US$ 995 por mês servem para gerar listas de sites por tecnologia, não para olhar um site só.

Fontes: Wappalyzer, BuiltWith, Chrome DevTools, Extrator de Sites, consultadas em outubro de 2026.

Use a extensão para o primeiro olhar. Se o resultado for "WordPress com Elementor" ou "Wix", a resposta costuma estar completa. Se for "React, GSAP, Three.js" ou "nenhum CMS detectado", a extensão chegou ao limite dela, e o próximo passo é o DevTools.

O que a extensão não vê e por que o DevTools é o passo seguinte?

A extensão diz o nome da biblioteca; não diz quanto ela pesa, em que ordem carrega, quais fontes vêm de fora nem que modelo 3D está por trás da cena. E uma parte grande da web não encaixa em rótulo: pela W3Techs, em 16 de outubro de 2026, 32,2% dos sites não usam nenhum CMS monitorado. São sites sob medida, e neles o detector automático devolve pouco.

Os números mostram o contraste. Pela mesma W3Techs, o jQuery ainda está em 64,5% dos sites, enquanto o GSAP aparece em 2,2%. Quando a extensão encontra GSAP, Three.js ou Next.js, você está diante de um site feito por gente que escolheu ferramenta, e aí vale abrir o código.

O DevTools mostra o site do jeito que o navegador o recebeu: cada arquivo, com tipo, tamanho, tempo e quem pediu. É a diferença entre ler a ficha técnica e abrir o capô. O Ctrl+U mostra só o HTML que o servidor mandou; a aba Rede mostra tudo o que o JavaScript puxou depois, e é nesse "depois" que mora a animação, o 3D e a fonte licenciada.

A extensão responde "o que é". A aba Rede responde "quanto custa e de onde vem". Só a segunda pergunta ajuda a orçar ou a reproduzir.

Como ler a aba Rede, as fontes e as bibliotecas em 10 minutos?

Abra o DevTools, marque a opção de desligar o cache, recarregue a página e filtre por tipo: JS primeiro, depois Font, Img e Media. Em 10 minutos você sabe o que o site carrega, quanto pesa e qual arquivo chamou qual. A documentação do Chrome DevTools diz que cada linha do registro de rede é um recurso, com colunas de tipo, tamanho e tempo, e que o link na coluna Initiator leva ao código que causou a requisição.

A referência do painel confirma os filtros por tipo (All, Fetch/XHR, JS, CSS, Img, Media, Font, Doc e WS), a caixa Disable cache, a aba Headers por requisição e a busca em cabeçalhos, payloads e respostas. O resto é olhar com atenção.

Um teste rápido fecha a leitura: na aba Console, digite gsap, THREE ou lottie e aperte Enter. Se voltar um objeto, a biblioteca está carregada e exposta na página. Se voltar erro, ela pode estar empacotada dentro de um arquivo com outro nome, e a busca por conteúdo do painel Rede encontra. O roteiro mais longo, para sites premiados com scroll, GSAP, Lenis e WebGL, está em como estudar um site do Awwwards por dentro.

Como reconhecer GSAP, Three.js, Lottie, Next.js, WordPress e Webflow pelo código?

Cada tecnologia deixa uma assinatura: um caminho de arquivo, um objeto global ou um atributo no HTML. A tabela reúne os sinais que mais se repetem, com a documentação oficial que os descreve.

Fontes: Next.js, WordPress REST API, GSAP, three.js, lottie-web, consultadas em outubro de 2026; sinais do Webflow observáveis no HTML de sites publicados na plataforma.

Os sinais vêm da documentação de cada projeto. O Next.js serve JavaScript e CSS pelo caminho /_next/static/, com chunks de nome longo e hash. O WordPress expõe a API em /wp-json/, e wp-json/wp/v2/posts devolve os posts; se esse endereço responde, o site é WordPress, mesmo com tema que esconde o resto. A documentação do GSAP mostra a instalação por npm install gsap e o registro automático dos plugins quando carregados por tag script depois do núcleo, e a biblioteca inteira é gratuita com apoio da Webflow.

Para 3D, o sinal mais confiável não é o script, é o modelo: um .glb ou .gltf na aba Rede diz que há cena carregada, e o three.js, importado como import * as THREE from 'three', é a biblioteca que quase sempre a desenha. A diferença entre Three.js puro, Spline e React Three Fiber está em qual tecnologia para o seu site 3D. Para o Lottie, o repositório oficial descreve a chamada lottie.loadAnimation() e o arquivo .json exportado do After Effects pelo Bodymovin: achou um JSON grande de animação, achou Lottie.

O que fazer com a resposta: orçar, estudar ou capturar?

A resposta serve para três decisões: calibrar um orçamento, decidir o que estudar e guardar a referência antes que ela mude. Saber o nome da tecnologia sem uma dessas três finalidades é curiosidade, e curiosidade não paga a hora.

Para orçar, a leitura muda a conversa com o cliente ou com a agência. Um site em Webflow ou WordPress com tema pronto custa e demora uma coisa; um site em Next.js com GSAP e Three.js custa outra, porque cada animação e cada modelo é trabalho de engenharia. A comparação de custo, propriedade e manutenção está em WordPress ou site sob medida e em site estático ou dinâmico.

Para estudar, a aba Rede mostra o que carrega, mas não deixa a animação rodando no seu computador. É aqui que entra o Extrator de Sites, que é o nosso: extensão para Chrome, Brave e Edge que baixa o site inteiro numa pasta local, com 3D, animações, texturas e fontes funcionando, em três modos (Completo, Rápido e Site inteiro, que segue os links do menu até 2 níveis). Ele gera de brinde o design system do site, com 15 seções e um tokens.css. O plano grátis dá 2 downloads por mês, sem cartão; o lançamento custa R$ 297 no primeiro ano e R$ 497 por ano depois, consultado em outubro de 2026.

Ele não é a melhor escolha em três situações: se você usa Safari ou Firefox, que não têm os recursos que a captura precisa; se quer só uma página simples, que o salvar do navegador já guarda; e se a intenção é publicar o site de outra empresa como seu, o que a ferramenta não serve para fazer e a lei não permite. O que cada método guarda, do Ctrl+S ao HTTrack, está em como baixar um site completo, e o caminho para tirar cores, fontes e espaçamentos está em como extrair cores e fontes de um site.

Perguntas frequentes

A Wappalyzer é grátis?

A extensão existe para Chrome, Firefox, Edge e Safari, e a conta grátis no site dá 50 consultas de tecnologia por mês, consultado em outubro de 2026. Os planos pagos, a partir de US$ 250 por mês, servem para listas de sites por tecnologia e API. Para olhar um site de cada vez, a conta grátis basta.

Como saber se um site é WordPress?

Abra o endereço do site seguido de /wp-json/. Se voltar um JSON com o nome do site e as rotas, é WordPress, mesmo que o tema esconda o rodapé. Na aba Rede, os caminhos /wp-content/ e /wp-includes/ confirmam. Pela W3Techs, 39,7% de todos os sites usam WordPress, então a chance de acertar só com esse teste já é alta.

Como saber se um site foi feito no Webflow, Wix ou Framer?

Procure no HTML da página os atributos data-wf-page e data-wf-site e um script webflow.js: é Webflow. Wix e Framer deixam os próprios domínios de conteúdo nos caminhos das imagens e dos scripts na aba Rede. O que cada plataforma deixa exportar está em como baixar um site do Framer, do Webflow ou do Wix.

É permitido inspecionar o código de um site de outra empresa?

Sim. O código que o navegador recebe é público por definição, e o DevTools só mostra o que já chegou à sua máquina. O que a lei protege é a cópia: texto, imagem, código e marca têm dono. Estudar, anotar e reproduzir a técnica com conteúdo seu é estudo; publicar a cópia é infração.

Dá para saber qual tecnologia um site usa pelo celular?

Em parte. O BuiltWith funciona em qualquer navegador, inclusive no celular, e dá o nome das tecnologias. A aba Rede do DevTools e a leitura dos arquivos pedem um computador. Se a dúvida surgiu no celular, salve o endereço e faça a leitura completa depois.

Conclusão

Descobrir a tecnologia de um site tem dois níveis. O primeiro é o nome, e a extensão entrega em um clique. O segundo é o custo: quanto pesa, o que carrega e quem chamou, e esse só a aba Rede mostra. A tabela de sinais encurta o caminho entre os dois.

O que você faz com a resposta é o que importa. Para orçar, ela calibra a conversa. Para estudar, ela indica o que capturar e abrir offline, com a animação rodando. Para quem projeta sites, é a diferença entre admirar uma referência e entender como ela foi feita.

Veja os sistemas e os serviços da Brave Cross para projetar o seu site no nível das referências que você estuda