Extraia o código-fonte HTML de qualquer página web com facilidade. Visualize, copie ou baixe o conteúdo diretamente com destaque de sintaxe e suporte a múltiplos proxies.
Extrair Código-Fonte
Código-Fonte Extraído:
Como Inspecionar o Código-Fonte no Google Chrome
Inspecionar o código-fonte de uma página web no Google Chrome é uma tarefa simples e muito útil para desenvolvedores, designers e profissionais de SEO. Siga os passos abaixo:
Passo 1: Abra o Google Chrome
Certifique-se de que está usando o navegador Google Chrome. Abra a página que deseja inspecionar.
Passo 2: Acesse as Ferramentas de Desenvolvimento
Existem três formas principais de abrir as ferramentas de desenvolvimento (DevTools):
- Clique com o botão direito do mouse em qualquer parte da página e selecione “Inspecionar” no menu de contexto.
- Use o atalho de teclado:
Windows/Linux: Ctrl + Shift + IMac: Cmd + Option + I- Clique no menu de três pontos no canto superior direito do Chrome (⋮) > Mais Ferramentas > Ferramentas do desenvolvedor.
Passo 3: Navegue pelo Código-Fonte
Ao abrir o DevTools, você verá várias guias. As principais para inspecionar o código-fonte são:
Elementos:
Exibe a estrutura do HTML da página.
Você pode passar o mouse sobre os elementos HTML para destacar a área correspondente na página.
Console:
Permite executar comandos JavaScript e depurar scripts.
Rede (Network):
Exibe todos os recursos carregados pela página, como arquivos HTML, CSS, JavaScript e imagens.
Passo 4: Explore o HTML
Na aba Elementos:
Clique no ícone de seleção (< >) no canto superior esquerdo do DevTools e depois clique em um elemento da página. Isso destacará o código HTML correspondente.
Você pode editar o código HTML diretamente no DevTools para testar alterações temporárias.
Passo 5: Visualize o Código-Fonte Completo
Se você deseja visualizar todo o código-fonte da página:
- Clique com o botão direito em qualquer lugar da página (fora do DevTools).
- Selecione “Exibir código-fonte da página”.
- Uma nova aba será aberta exibindo o HTML completo.
Dicas Adicionais
Copiar Elementos: Clique com o botão direito em um elemento no DevTools > Copiar > Copiar elemento.
Buscar no HTML: Use o atalho Ctrl + F (ou Cmd + F no Mac) para procurar palavras ou tags específicas no HTML.
Publicado originalmente em 01/01/2025
