Inspecionando HTML nas DevTools

Bem-vindo a uma das lições mais empolgantes da sua jornada de desenvolvimento web! Hoje, você vai aprender um truque secreto que os desenvolvedores usam todos os dias para entender como os sites são construídos.

Os óculos de raio-x da web

Todo navegador moderno vem com um recurso poderoso e embutido chamado Ferramentas do Desenvolvedor, ou "DevTools" para encurtar.

Pense nas DevTools como um par de óculos de raio-x para a internet. Elas permitem que você espie diretamente por trás das cortinas de qualquer site para ver o "esqueleto" HTML escondido que mantém tudo unido.

Como abrir

É incrivelmente fácil acessar essa ferramenta. Você não precisa instalar nada especial. Basta seguir estes passos:

1. Abra o seu navegador e vá para qualquer página web.
2. Clique com o botão direito em qualquer elemento da tela, como uma imagem ou um bloco de texto.
3. Selecione "Inspecionar" ou "Inspecionar elemento" no menu que aparece.
4. Um novo painel vai se abrir na sua tela. Olhe para o topo desse painel e certifique-se de que você está com a aba "Elements" selecionada.

Navegando pela árvore do DOM

Dentro daquela aba Elements, você vai ver um grande bloco de código. Esta é a estrutura HTML da página, e ela é organizada em uma hierarquia chamada DOM (Document Object Model).

Você pode pensar no DOM como uma árvore genealógica gigante e recolhível. Você vai notar pequenas setas ou triângulos ao lado de algumas das tags HTML.

• Clique em uma seta apontando para a direita para expandir uma tag e ver o que está aninhado dentro dela.
• Clique em uma seta apontando para baixo para esconder ou recolher essas tags aninhadas.

Essa árvore recolhível facilita explorar grandes quantidades de código sem ficar sobrecarregado.

O superpoder (edição ao vivo)

Agora, a melhor parte! As DevTools dão a você o superpoder da edição ao vivo. Você pode de fato mudar o código do site bem na sua tela.

• Encontre um trecho de texto ou uma tag HTML dentro do painel Elements.
• Clique duas vezes nele para selecioná-lo.
• Digite algo completamente novo.
• Aperte Enter no seu teclado.

A página web vai se atualizar instantaneamente para mostrar as suas novas mudanças!

Um exercício prático

Vamos colocar o seu novo superpoder à prova com uma missão rápida e divertida.

1. Vá para um site real, no ar — como um site de notícias popular ou o readlax.com.
2. Encontre a manchete principal da página (geralmente é uma tag <h1>).
3. Clique com o botão direito na manchete e selecione "Inspecionar".
4. No painel Elements, clique duas vezes no texto da manchete.
5. Apague o texto, digite o seu próprio nome e aperte Enter.

Parabéns! Agora você é a estrela da primeira página.

O grande aviso

Ver o seu nome em um site famoso pode fazer você se perguntar: "Espera, eu acabei de hackear este site?"

A resposta é um sonoro não!

Quando você visita uma página web, o seu navegador simplesmente baixa uma cópia local e temporária do código da internet. Quando você usa as DevTools, está apenas mudando esse arquivo temporário no seu próprio computador pessoal.

Assim que você apertar o botão "Atualizar", todas as suas edições vão desaparecer instantaneamente. O site real vai recarregar do zero a partir do servidor, exatamente como estava antes. Então não tenha medo de experimentar — você não consegue quebrar nada permanentemente!

Resumo

• As DevTools são um recurso embutido do navegador que permite olhar o código por trás de um site.
• Você pode abri-las a qualquer momento clicando com o botão direito em uma página web e selecionando "Inspecionar".
• O DOM é estruturado como uma árvore recolhível, permitindo que você esconda ou expanda tags HTML aninhadas.
• Você pode clicar duas vezes em tags ou texto no painel Elements para editá-los ao vivo na sua tela.
• Suas mudanças são totalmente seguras e temporárias. Atualizar a página apaga as suas edições e restaura o site original.