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 código-fonte usando Exibir código-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.
Uma nova guia é aberta junto com todo o HTML da página da web, completamente expandido e não formatado.
Se você estiver procurando por um elemento ou parte específica no código-fonte HTML, usar Exibir código-fonte é entediante 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.
Clique na pequena seta cinza ao lado de um elemento para expandi-lo ainda mais.
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 no espaço da página e clique em “Inspecionar”.
Quando o painel é aberto desta vez, ele vai diretamente para a parte do código que contém o elemento que você clicou.
Se quiser alterar a posição do encaixe, você pode movê-lo para a parte inferior, esquerda, direita ou até 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.
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.