Como visualizar o código-fonte HTML no Google Chrome

Ver imagem original do herói

Quer você seja um web designer depurando o código-fonte do seu site ou apenas curioso sobre a aparência do código de um site, você pode visualizar o código-fonte HTML diretamente no Google Chrome. Existem duas maneiras de visualizar o código-fonte HTML: Visualizar código-fonte e Inspecionar usando ferramentas de desenvolvedor.

Exibir fonte usando Exibir fonte da página

Abra o Chrome e vá para a página da web em que deseja visualizar o código-fonte HTML. Clique com o botão direito na página e clique em “Exibir código-fonte da página” ou pressione Ctrl + U para ver o código-fonte da página em uma nova guia.

Clique com o botão direito em uma página e clique em Exibir código-fonte da página

Uma nova guia é aberta junto com todo o HTML da página da web, completamente expandido e não formatado.

A fonte abre em uma nova guia

Se você estiver procurando por um elemento ou parte específica no código-fonte HTML, usar Exibir código-fonte é tedioso e complicado, especialmente se a página usa muito JavaScript e CSS.

Inspecionar fonte usando ferramentas de desenvolvedor

Este método usa o painel Ferramentas do desenvolvedor no Chrome e é uma abordagem muito mais limpa para visualizar o código-fonte. HTML é mais fácil de ler aqui, graças à formatação adicional e à capacidade de recolher elementos que você não está interessado em ver.

Abra o Chrome e vá para a página que deseja inspecionar; em seguida, pressione Ctrl + Shift + i. Um painel encaixado será aberto ao lado da página da web que você está visualizando.

Ferramentas do desenvolvedor são abertas como um painel encaixado no Chrome

Clique na pequena seta cinza ao lado de um elemento para expandi-lo ainda mais.

Recolha elementos ao clicar na seta cinza

Se você não quiser ver o código da página inteira por padrão, mas em vez disso inspecionar um elemento específico no HTML, clique com o botão direito nesse espaço na página e clique em “Inspecionar”.

Recomendado:  Nova atualização que destrói o espectro acelera PCs com Windows 10

Vá para um elemento específico ao clicar com o botão direito nele e, a seguir, clicar em Inspecionar

Quando o painel abre desta vez, ele vai diretamente para a parte do código que contém o elemento que você clicou.

A ferramenta vai diretamente para aquele elemento

Se quiser alterar a posição do encaixe, você pode movê-lo para a parte inferior, esquerda, direita ou até mesmo desencaixá-lo em uma janela separada. Clique no ícone do menu (três pontos) e escolha desencaixar em uma janela separada, encaixar à esquerda, encaixar na parte inferior ou encaixar à direita, respectivamente.

Altere a orientação do encaixe ao clicar no ícone de menu e, em seguida, clicar em uma das quatro opções


Isso é tudo que há para fazer. Quando terminar de examinar o código, feche a guia Exibir código-fonte ou clique no ‘X’ no painel Ferramentas do desenvolvedor para retornar à sua página da web.