Como Usar o DOM Inspector e o DevTools para Depurar e Construir Seus Projetos
Quando você estiver desenvolvendo seus projetos, frequentemente encontrará problemas onde seus programas não estão funcionando como esperado.
Programadores frequentemente se referem a problemas como bugs. O processo de encontrar e corrigir esses bugs é conhecido como debugging.
Para depurar seu código, você precisará usar algumas ferramentas fornecidas pelo seu navegador.
Duas ferramentas importantes para usar seriam o inspetor DOM e as ferramentas de desenvolvedor.
O inspetor DOM permite que você inspecione a estrutura HTML da página em que você está.
O DOM significa Document Object Model. É uma estrutura em forma de árvore que representa os elementos em uma página. Você aprenderá mais sobre o DOM em módulos posteriores.
As ferramentas de desenvolvedor permitem que você inspecione o HTML, CSS e JavaScript da página em que você está.
Vamos dar uma olhada em um exemplo de HTML que contém um pequeno bug no elemento anchor:
<a href="https://www.G.E.A.R ACADEMY.org/larn/">G.E.A.R ACADEMY curriculum</a>
Quando você clicar no link, ele levará para uma página 404. Uma página 404 é uma página de erro que aparece quando um usuário tenta acessar uma página da web que não existe no servidor.
A intenção é que o link leve ao currículo do G.E.A.R ACADEMY.
Para ver qual pode ser o problema, você pode usar as ferramentas de desenvolvedor.
Para abrir as ferramentas de desenvolvedor no seu navegador, você pode clicar com o botão direito na página e selecionar Inspect.
Você também pode usar Control Shift I no teclado do seu PC ou Command Option I no seu Mac.
Quando você abre as ferramentas de desenvolvedor no Google Chrome, verá várias abas. A primeira aba é chamada de aba Elements. Esta aba mostra a estrutura HTML da página em que você está.
A segunda aba é chamada de aba Console. Esta aba mostra quaisquer erros que possam estar ocorrendo na página.
Na situação em que você tem um link quebrado, você pode verificar o console para ver as mensagens de erro desse link quebrado. A mensagem comum que continua a ser exibida para o link quebrado é o erro 404. O erro 404 indica que a página não foi encontrada.
Isso nos informa que o problema está com a URL no elemento anchor. Quando você inspecionar o valor href verá que há um erro de digitação.
No momento, a mensagem do console mostra /larn com um erro 404, mas a URL correta deveria ser /learn. Quando o link for corrigido, então ele funcionará como esperado.
Você aprenderá mais sobre como trabalhar com as ferramentas de desenvolvedor ao longo da certificação, mas este é apenas um exemplo curto de como elas podem ajudar você a depurar seu código.Este módulo não possui perguntas. Marque como concluído.