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.