Para ver o código-fonte de um site, aperte Ctrl+U (Cmd+Option+U no Mac). Isso mostra o HTML que o servidor mandou. O site que aparece na tela é outra coisa: o DOM, montado pelo navegador depois que o JavaScript roda. Para enxergá-lo, use o Inspecionar, no DevTools.
O que o Ctrl+U mostra, exatamente?
O Ctrl+U abre uma aba com o endereço precedido de view-source:. A lista oficial de atalhos do Chrome, consultada em outubro de 2026, descreve o comando como a exibição do código-fonte HTML não editável da página atual. Funciona igual no Edge e no Brave, que usam o mesmo motor.
O que aparece ali é a resposta do servidor, do jeito que chegou. Serve para conferir título, meta description, dados estruturados e scripts: é o que um robô que não executa JavaScript recebe.
O que não aparece: tudo o que foi criado depois. Texto que veio de uma API, componente React, animação, cena 3D, imagem carregada ao rolar. Num site montado no navegador, o Ctrl+U pode mostrar quase só uma div vazia e uma lista de scripts.
Qual a diferença entre HTML e DOM?
O HTML é um arquivo de texto. O DOM é a estrutura viva que o navegador constrói a partir dele. A introdução ao DOM da MDN, revisada em abril de 2026, define o DOM como a interface que representa a página para que programas alterem estrutura, estilo e conteúdo.
O JavaScript mexe no DOM o tempo todo: cria blocos, troca textos, injeta o canvas do 3D. O arquivo HTML original não muda. Por isso o Ctrl+U e o painel Elements raramente mostram a mesma coisa.
E o peso dessa camada só cresce. O capítulo de JavaScript do Web Almanac 2024, publicado pelo HTTP Archive em março de 2025, mediu uma mediana de 558 KB de JavaScript por página no celular, em 22 requisições. É muito código rodando depois do HTML.
Como ver o código que o navegador montou?
Pelo DevTools, que vem dentro do Chrome, do Edge e do Brave. A página oficial de abertura do DevTools lista os atalhos: Ctrl+Shift+C abre direto no modo de inspeção, e F12 ou Ctrl+Shift+I abre o último painel usado.
Abra o modo de inspeção
Aperte Ctrl+Shift+C (Cmd+Option+C no Mac) e passe o mouse sobre a parte da página que interessa.
Clique no elemento
O painel Elements abre no ponto exato do DOM, com o CSS aplicado ao lado.
Leia o DOM, não o arquivo
O que aparece ali é a página como está agora, depois de todo o JavaScript.
Vá ao painel Sources
Veja os arquivos agrupados por origem: scripts, folhas de estilo, fontes.
Abra o painel Network e recarregue
Cada linha é um arquivo que o site pediu, com tipo, tamanho e quem pediu.
O painel Sources, na documentação atualizada em setembro de 2024, organiza os arquivos por frame e por origem e permite depurar o script. O painel Network, atualizado em outubro de 2024, mostra cada requisição com status, tipo, origem do pedido, tamanho e tempo. É ali que aparecem o modelo 3D, a fonte e o vídeo.
Ctrl+U, Inspecionar ou Network: o que cada um mostra?
| Ferramenta | Como abrir | O que mostra | O que não mostra |
|---|---|---|---|
| Ctrl+U (view-source) | Ctrl+U ou Cmd+Option+U | HTML inicial enviado pelo servidor | Tudo o que o JavaScript criou depois |
| Elements (Inspecionar) | Ctrl+Shift+C ou clique direito, Inspecionar | DOM atual, CSS aplicado a cada elemento | Arquivos que não viraram elemento, como o GLB dentro do canvas |
| Sources | F12, aba Sources | Scripts, estilos e fontes agrupados por origem | O estado da página; e só guarda o que foi pedido até ali |
| Network | F12, aba Network, recarregar | Cada arquivo pedido, com tipo, tamanho e tempo | Nada é salvo como site que abra sozinho |
| Captura no navegador (Extrator) | Extensão no Chrome, Brave ou Edge | O site inteiro como rodou, com os arquivos salvos no computador | Área logada e vídeo de streaming |
Fontes: atalhos do Chrome, documentação do Chrome DevTools sobre DOM, Sources e Network, e página do Extrator, consultadas em outubro de 2026.
Por que isso pesa mais em sites feitos com React?
Porque nesses sites quase tudo nasce no navegador. Segundo a W3Techs, em outubro de 2026 o React aparecia em 6,0% dos sites e o jQuery em 65,4%. A fatia é pequena, mas concentra muitos dos sites que valem estudo: produtos digitais, portfólios premiados, experiências 3D.
O mesmo limite derruba as ferramentas de download antigas. Explicamos em detalhe por que o HTTrack não baixa sites modernos: ele lê o HTML do servidor, igual ao Ctrl+U, e não roda o script. Já num site montado no servidor, como a maioria dos temas de WordPress, o Ctrl+U costuma trazer o texto da página; a diferença entre os dois modelos aparece em WordPress ou site sob medida.
Como guardar o que o navegador montou?
O DevTools mostra, mas não guarda. Copiar do Elements traz o HTML daquele instante, sem os arquivos que o script pede.
Para guardar, a captura precisa acontecer onde o site roda. O Extrator, extensão da Brave Cross para Chrome, Brave e Edge, escuta a rede, rola a página sozinho e salva cada arquivo no computador sem alterar o código, segundo a página do produto em outubro de 2026. Também gera o design system do site, com cores e fontes em tokens.
O passo a passo de cada método, do Ctrl+S ao Extrator, está no guia como baixar um site completo e abrir offline. Para transformar a leitura do código em estudo de verdade, siga o roteiro de como estudar um site do Awwwards por dentro. E para ver o que aparece quando abrimos o nosso próprio herói 3D, leia a anatomia de um herói 3D.
Perguntas frequentes
Qual o atalho para ver o código-fonte de um site?
No Chrome, no Edge e no Brave, Ctrl+U no Windows e no Linux, ou Cmd+Option+U no Mac. A lista oficial de atalhos do Chrome, consultada em outubro de 2026, descreve o comando como a exibição do código-fonte HTML não editável da página. Outra forma é digitar view-source: antes do endereço na barra. Os dois mostram o HTML que o servidor enviou, não a página montada.
Por que o código-fonte não mostra o texto que aparece na página?
Porque o texto foi colocado pelo JavaScript depois que a página abriu. O Ctrl+U mostra o HTML inicial, e em sites feitos com React ou similares esse HTML pode ser quase vazio. A documentação do Chrome DevTools explica que o HTML é o conteúdo inicial e o DOM é o conteúdo ativo. Para ver o texto, use o Inspecionar, que abre o DOM.
Como ver o código-fonte de um site no celular?
O navegador do celular não traz o DevTools. O caminho oficial é a depuração remota: com a depuração USB ligada no Android, você conecta o aparelho ao computador, abre chrome://inspect no Chrome e inspeciona a página que está aberta no celular, como descreve a documentação de depuração remota do Chrome DevTools.
Dá para editar o código de um site pelo Inspecionar?
Dá, mas só na sua tela. O painel Elements tem a opção Edit as HTML, descrita na documentação do Chrome DevTools, e a mudança aparece na hora. Ela some ao recarregar e nunca chega ao servidor nem a outros visitantes. O painel Sources ainda permite Overrides, que guardam a alteração localmente.
Ver o código-fonte de um site é legal?
Sim. O código que chega ao navegador é o que qualquer visitante recebe para ver a página, e estudá-lo é parte de aprender o ofício. Republicar o site de outra pessoa como se fosse seu é outra história, que tratamos em copiar site é crime?. Este texto não substitui orientação de advogado.
Como salvar o código de um site com tudo funcionando?
Copiar do Ctrl+U ou do Elements não basta, porque os arquivos que o script pede ficam de fora. O Extrator faz isso no Chrome, no Brave e no Edge: escuta a rede, rola a página e salva tudo sem alterar o código. Segundo a página do produto, em outubro de 2026, o plano grátis libera 2 downloads por mês.
Do código-fonte ao site inteiro no seu computador
O Ctrl+U mostra o que o servidor manda. O Inspecionar mostra o que o navegador montou, e o Network, de onde cada peça veio. Por que só oferecemos ferramentas que funcionam no nosso próprio trabalho está no ensaio O que não usamos, não vendemos.
Para estudar com calma, sem depender do site no ar, a captura precisa rodar no navegador. O plano grátis libera 2 downloads por mês, sem cartão: instale o Extrator e baixe o site que você estava inspecionando.