Seja você um designer de sites aprimorando o código do seu projeto web ou simplesmente curioso para entender a estrutura de um site, o Google Chrome oferece recursos práticos para examinar o código HTML. Existem basicamente duas formas de acessar esse código: utilizando a opção “Exibir código-fonte” e através da ferramenta “Inspecionar”, presente nas Ferramentas do Desenvolvedor.
Visualizando o Código-Fonte através da Opção “Exibir código-fonte da página”
Para começar, abra o Google Chrome e navegue até a página da web cujo código HTML você deseja analisar. Em seguida, clique com o botão direito em qualquer parte da página. No menu que surge, selecione a opção “Exibir código-fonte da página”. Alternativamente, você pode usar o atalho de teclado Ctrl + U. Isso abrirá uma nova aba exibindo o código-fonte HTML da página.
A nova aba apresentará todo o código HTML da página, sem qualquer formatação, em sua forma expandida.
Caso você esteja procurando por um elemento ou seção específica no código HTML, o método “Exibir código-fonte” pode ser pouco prático e trabalhoso, especialmente se a página fizer uso extensivo de JavaScript e CSS.
Inspecionando o Código-Fonte com as Ferramentas do Desenvolvedor
Uma alternativa mais eficaz para analisar o código-fonte é usar o painel Ferramentas do Desenvolvedor do Chrome. Ele oferece uma visualização mais organizada, com formatação adequada e a capacidade de ocultar elementos que não interessam no momento.
Para acessar, abra o Chrome e vá até a página desejada. Em seguida, pressione as teclas Ctrl + Shift + i. Isso abrirá um painel acoplado à lateral da página web.
Clique nas pequenas setas cinzas ao lado de cada elemento para expandir e visualizar seu conteúdo.
Se, ao invés de analisar toda a estrutura HTML da página, você quiser inspecionar um elemento específico, clique com o botão direito sobre ele e selecione “Inspecionar”.
Dessa forma, o painel abrirá diretamente na seção do código que contém o elemento selecionado.
Para alterar a posição do painel, você pode movê-lo para a parte inferior, esquerda, direita ou até mesmo desacoplá-lo e abrir em uma janela separada. Para isso, clique no ícone de menu (três pontos) e escolha a opção desejada.
E é isso! Para finalizar, feche a aba do “Exibir código-fonte” ou clique no ‘X’ do painel Ferramentas do Desenvolvedor para retornar à página web original.