WDD 131: Fundamentos da Web Dinâmica

S02 – Atividade de Aprendizagem: Depuração de JavaScript

Visão Geral

Depuração é o processo de encontrar e corrigir erros no seu código. É uma habilidade essencial para qualquer desenvolvedor. Você aprenderá a usar o DevTools do navegador para depurar seu código JavaScript.

Preparação

Tipos de Erros

Existem três tipos de erros que você encontrará ao escrever código em JavaScript:

• Erros de Sintaxe – Erros que ocorrem quando você escreve código que não segue as regras da linguagem JavaScript. Eles são detectados pelo navegador e impedirão que seu código seja executado.
• Erros de Tempo de Execução – Erros que ocorrem enquanto seu código está em execução. Esses erros podem ser causados por diversos problemas, como tentar acessar uma propriedade de um objeto que não existe ou chamar uma função que não existe.
• Erros Lógicos – Erros que ocorrem quando seu código não gera o resultado esperado. Esses erros podem ser difíceis de encontrar porque não fazem com que o navegador gere um erro.

Instruções da Atividade

Esta atividade se concentra em técnicas de depuração para o navegador.

Arquivos de Configuração

1. Na sua subpasta semana02, adicione um arquivo chamado "depuracao.html".
2. No arquivo depuracao.html, digite ! e pressione a tecla Tab no seu teclado. Esta ação adicionará automaticamente os componentes básicos de um documento HTML.
3. Adicione uma subpasta chamada "scripts" à pasta semana02 e adicione um arquivo chamado "depuracao.js".
4. No arquivo depuracao.html, adicione uma referência de script ao arquivo JavaScript depuracao.js.
   Avalie Seu Conhecimento

   <script src="scripts/depuracao.js" defer></script>

HTML

1. Adicione os seguintes elementos ao corpo HTML da sua página depuracao.html:

   <h1>Depuração JavaScript usando DevTools</h1>
   <p>Área do círculo com raio <span id="raio"></span>: <span id="area"></span></p>

JavaScript

1. Adicione as seguintes instruções JavaScript ao seu arquivo depuracao.js:

   const resultadoRaio = document.getElementById('raio');
   const resultadoArea = document.querySelector('area');
   
   let area = 0;
   const PI == 3.14159;
   
   const raio = 10;
   area = PI * raio * raio;
   resultadoRaio = raio;
   resultadoArea = area;
   
   raio = 20;
   area = PI * raio * raio;
   resultadoRaio = raio;
   resultadoArea = area;

Depuração

1. Usando o Live/Five Server, abra seu arquivo depuracao.html em um navegador.
2. Abra o DevTools do navegador e a aba Console.

   

3. Observe erros destacados em vermelho no console do DevTools e descritos na janela Console. Eles são erros de sintaxe ou de tempo de execução e impedirão que seu código seja executado até que sejam corrigidos.
4. Corrija o primeiro erro descrito no arquivo depuracao.js. A imagem abaixo indica que o erro está na linha 5 (depuracao.js:5)

   

   O operador de comparação está confundindo o compilador. No VS Code, remova o sinal de igual extra.

   const PI = 3.14159;

5. Na sessão do navegador localhost, atualize a página e verifique o console para ver o próximo erro.

   

   Esse erro se refere ao problema de tentar atribuir um valor a um elemento HTML. Isso pode ser confuso, já que a mensagem de erro diz "Atribuição a variável constante". Altere as linhas de código de ambos os elementos para usar a propriedade textContent.

   resultadoRaio.textContent = raio;
   resultadoArea.textContent = area;

6. Na sessão do navegador localhost, atualize a página e verifique o console para ver o próximo erro.

   

   Esta mensagem de erro é precisa. O código está tentando atribuir um novo valor à variável raio que foi declarada como uma constante. Altere a declaração da variável para let em vez de const.

   let raio = 10;

7. Corrija outros erros encontrados no console.
8. Depois de obter o resultado da página que parece correta, abra o painel Sources (Fontes) no DevTools.
9. Pratique a "depuração por etapas" por meio do código JavaScript definindo um ponto de interrupção. Clique no número da linha onde deseja executar uma pausa no programa.
10. Atualize a página para acionar a execução do código novamente. O corpo ficará esmaecido e indicará que o carregamento da página foi "Pausado no depurador"

    

11. Use o botão Step →• (Avançar) para percorrer o código linha por linha.

    

12. Sempre que quiser, você pode passar o mouse sobre uma variável para visualizar o valor de atribuição atual dela.
13. Continue percorrendo o código até ter uma boa compreensão de como ele está sendo executado.