Vendo HTML no DevTools

DevTools é um conjunto de ferramentas do navegador para inspecionar páginas. Você pode ver o HTML real, testar mudanças e entender como uma página foi montada.

Como abrir

Na maioria dos navegadores, clique com o botão direito em uma parte da página e escolha Inspecionar. Depois abra o painel Elements.

O que você vê

O painel Elements mostra a árvore HTML da página. Você pode expandir tags, selecionar elementos e ver como o conteúdo está organizado.

Testando mudanças

Mudanças feitas no DevTools são temporárias. Elas ajudam a experimentar, mas somem quando a página é recarregada.

Exemplo para praticar

<h1>Inspecione este título</h1>
<p>Abra o DevTools e encontre este parágrafo no painel Elements.</p>

Mini tarefa

Execute o exemplo, abra o DevTools e encontre a tag <p>. Tente editar o texto temporariamente no navegador.

Pequeno quiz

Pergunta: Alterações no DevTools mudam o arquivo original do site?

Resposta: Não. Elas são temporárias no navegador.

Pequeno desafio

Crie um título e uma lista. Depois execute, abra o DevTools e encontre cada item da lista.

<!-- coloque seu código abaixo -->

Resumo

• DevTools permite inspecionar o HTML de uma página.
• O painel Elements mostra a estrutura do documento.
• Você pode testar mudanças temporárias.
• Inspecionar páginas ajuda a aprender HTML mais rápido.