Como ver o código-fonte no Chrome, Firefox e Safari | We.Inc
Atalhos de teclado para ver o código-fonte HTML de uma página no Chrome, Firefox e Safari, a diferença para o Inspecionar, o que você pode reutilizar e um visualizador que resume o HTML colado.
Pressione Ctrl+U no Windows ou no Linux, no Chrome e no Firefox. No Mac, o Chrome usa Command+Option+U e o Firefox usa Command+U. Você também pode clicar com o botão direito em uma área vazia da página e escolher Exibir código-fonte da página. O Safari primeiro precisa ter os recursos para desenvolvedores ativados em Ajustes, na aba Avançado.
Atalhos para ver o código-fonte por navegador (páginas de ajuda dos fabricantes)
Navegador
Windows ou Linux
Mac
Chrome
Ctrl+U
Command+Option+U
Firefox
Ctrl+U
Command+U
Safari
Não disponível
Ative antes Mostrar recursos para desenvolvedores web (Ajustes, Avançado)
Qualquer um dos anteriores
Clique com o botão direito na página e depois em Exibir código-fonte da página
Clique com o botão direito (ou Control-clique) na página
O código-fonte é o arquivo HTML que o servidor enviou antes de qualquer script rodar. Ele mostra qual título e descrição a página usa, quais tags de rastreamento ela carrega e onde ficam as imagens. Isso o torna o jeito mais rápido de conferir seu próprio site depois de uma edição ou de ver como é montada uma página que você admira.
Abra a página que você quer ler e pressione o atalho do seu navegador.
Use a busca do navegador (Ctrl+F ou Command+F) para ir direto ao que precisa, como <title ou og:image.
Para estudar com mais facilidade, copie tudo e cole no visualizador acima.
Para ver a página como ela fica depois que os scripts rodam, use o Inspecionar.
O Firefox permite criar um link para uma única linha: adicione #line100 ao final de um endereço view-source:.
No Firefox, selecione um trecho de texto, clique com o botão direito e escolha Exibir código-fonte da seleção para ver só essa parte.
Páginas feitas com um framework JavaScript costumam mostrar um código-fonte quase vazio. O Inspecionar mostra o que os scripts construíram.
Confira suas próprias páginas depois de cada redesign: um título ou uma descrição ausente aparece na hora no código-fonte.
Perguntas frequentes
Qual é a diferença entre Exibir código-fonte da página e Inspecionar?
Exibir código-fonte da página mostra o arquivo original vindo do servidor. O Inspecionar abre as ferramentas para desenvolvedores do navegador, onde, como explica a documentação do Chrome, a árvore do DOM mostra o estado atual da página, que difere do HTML quando o JavaScript adiciona, remove ou edita partes dela.
Posso copiar o código HTML de um site?
Você pode ler e aprender com ele. Reutilizar é outra história: o US Copyright Office diz que textos originais, ilustrações e fotografias de um site podem ser protegidos. Os direitos autorais não cobrem ideias, sistemas ou métodos, então aprenda a técnica e escreva sua própria versão. Esta é uma informação geral, não orientação jurídica.
Por que a opção de ver o código-fonte não aparece?
No Safari, ela fica oculta até você marcar Mostrar recursos para desenvolvedores web em Ajustes, Avançado. Em um computador gerenciado do trabalho ou da escola, um administrador pode ter desativado as ferramentas para desenvolvedores; pergunte a ele.
Consigo ver o código do servidor de um site, como PHP ou consultas ao banco de dados?
Não. O servidor roda esse código e envia apenas o HTML, CSS e JavaScript resultantes. Nada no código-fonte da página revela o que o produziu.
O que procurar no código-fonte das suas páginas
Perto do topo, dentro de <head>, você encontra o <title> e a <meta name="description">, o texto que os resultados de busca mostram. Mais abaixo ficam as tags og:, que controlam as prévias de links nas redes sociais, e os scripts de analytics ou de gerenciadores de tags.
Se uma mudança que você fez no editor do site não aparece aqui, a página pode estar em cache. Recarregue uma vez e confira de novo.
Reutilizando o que você encontra
Os direitos autorais protegem a forma como algo é expresso, não a ideia por trás. Uma ideia de layout ou uma técnica comum pode ser usada livremente; as fotos, os textos e as ilustrações de alguém não, a menos que a licença permita.
Ver código-fonte, Inspecionar e view-source: comparados
Três formas de ler o código de uma página
Método
Mostra
Permite editar
Ideal para
Exibir código-fonte da página
O HTML que o servidor enviou
Não
Conferir títulos, meta tags e scripts de rastreamento
Inspecionar (ferramentas para desenvolvedores)
A página ao vivo depois que os scripts rodaram
Sim, temporariamente
Descobrir qual código desenha um botão ou uma imagem
view-source: na barra de endereço (Firefox)
O mesmo que Exibir código-fonte da página
Não
Criar link para uma linha, como #line100
Buscas úteis dentro do código-fonte
Pressione Ctrl+F (Command+F no Mac) na aba do código-fonte e procure estes termos para encontrar as partes mais importantes.
O que procurar
Cada linha é algo para digitar na busca, seguido do que ela localiza.
Visualizador de código-fonte
Cole o HTML que você copiou de Exibir código-fonte da página. Ele fica no seu navegador; nada é enviado ou buscado.