Introdução à depuração do JavaScript

Este artigo ensina-lhe o fluxo de trabalho básico para depurar qualquer problema de JavaScript com o DevTools.

Passo 1: Reproduzir o erro

O primeiro passo na depuração é encontrar uma sequência de ações que reproduzem consistentemente um erro.

1. Abra a página Web de demonstração Introdução à Depuração de JavaScript numa nova janela ou separador. Para abrir a página Web, clique com o botão direito do rato na ligação e selecione "Abrir ligação no novo separador" ou "Abrir ligação numa nova Janela" na janela de pop-up. Em alternativa, pode premir sem soltar Ctrl (para Windows, Linux) ou Comando (para macOS) e, em seguida, clicar na ligação.

   Sugestão: abra o Microsoft Edge no Modo InPrivate para garantir que o Microsoft Edge é executado num estado limpo. Para obter mais informações, consulte Browse InPrivate in Microsoft Edge (Procurar InPrivate no Microsoft Edge)

2. Introduza 5 na caixa de texto Número 1 .

3. Introduza 1 na caixa de texto Número 2 .

4. Clique em Adicionar Número 1 e Número 2. A etiqueta abaixo do botão indica 5 + 1 = 51, em vez do resultado esperado de 6:

   

Passo 2: familiarizar-se com a IU da ferramenta Origens

O DevTools fornece várias ferramentas para diferentes tarefas. Estas tarefas incluem a alteração do CSS, a criação de perfis de desempenho de carregamento de páginas e a monitorização de pedidos de rede. A ferramenta Origens é onde depura JavaScript.

1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto:

   

2. Selecione a ferramenta Origens . Selecione o separador Página e, em seguida, selecione o ficheiro JavaScript: get-started.js

   

A IU da ferramenta Origens tem três partes:

• O painel Navegador (no canto superior esquerdo). Todos os ficheiros pedidos da página Web são listados aqui.

• O painel Editor (no canto superior direito). Depois de selecionar um ficheiro no painel Navegador , este painel apresenta o conteúdo do ficheiro.

• O painel Depurador (na parte inferior). Este painel fornece ferramentas para inspecionar o JavaScript da página Web. Se a janela DevTools for larga, este painel é apresentado à direita do painel Editor.

Passo 3: colocar o código em pausa com um ponto de interrupção

Um método comum para depurar este tipo de problema é inserir várias console.log() instruções no código e, em seguida, inspecionar valores à medida que o script é executado. Por exemplo:

function updateLabel() {
    var addend1 = getNumber1();
    console.log('addend1:', addend1);
    var addend2 = getNumber2();
    console.log('addend2:', addend2);
    var sum = addend1 + addend2;
    console.log('sum:', sum);
    label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

O console.log() método pode fazer o trabalho, mas os pontos de interrupção podem fazê-lo mais rapidamente. Um ponto de interrupção permite-lhe colocar o código em pausa a meio do runtime e examinar todos os valores nesse momento. Os pontos de interrupção têm as seguintes vantagens sobre o console.log() método .

• Com console.log()o , tem de abrir manualmente o código fonte, localizar o código relevante, inserir as console.log() instruções e, em seguida, atualizar a página Web para apresentar as mensagens na Consola. Com os pontos de interrupção, pode colocar o código relevante em pausa sem ter de saber como o código é estruturado.

• Nas suas console.log() instruções, tem de especificar explicitamente cada valor que pretende inspecionar. Com os pontos de interrupção, o DevTools mostra-lhe os valores de todas as variáveis nesse momento. Por vezes, as variáveis que afetam o código são ocultadas e ocultadas.

Resumindo, os pontos de interrupção podem ajudá-lo a encontrar e corrigir erros mais rapidamente do que o console.log() método .

Pontos de interrupção do serviço de escuta de eventos

Se recuar e pensar na forma como a aplicação funciona, poderá fazer uma estimativa educada de que a soma incorreta (5 + 1 = 51) é calculada no click serviço de escuta de eventos associado ao botão Adicionar Número 1 e Número 2 . Por isso, é provável que queira colocar o código em pausa na altura em que o click serviço de escuta é executado. Os Pontos de Interrupção do Serviço de Escuta de Eventos permitem-lhe fazê-lo:

1. No painel Navegador, (index) está selecionado por predefinição. Clique em get-started.js.

2. No painel Depurador , clique em Pontos de Interrupção do Serviço de Escuta de Eventos para expandir a secção. O DevTools revela uma lista de categorias de eventos, como Animação e Área de Transferência.

3. Clique em Expandir () junto ao evento Rato para abrir essa categoria. O DevTools revela uma lista de eventos do rato, como clicar e desativar o rato. Cada evento tem uma caixa de verificação junto ao mesmo.

4. Selecione a caixa de verificação junto a clicar em:

   

   O DevTools está agora configurado para colocar automaticamente em pausa quando qualquer click serviço de escuta de eventos é executado.

5. Na página Web de demonstração composta, clique novamente no botão Adicionar Número 1 e Número 2 . DevTools coloca a demonstração em pausa e realça uma linha de código na ferramenta Origens . DevTools coloca em pausa na linha 16 no get-started.js, mostrada no fragmento de código seguinte:

   if (inputsAreEmpty()) {
   

   Se colocar em pausa numa linha de código diferente, clique em Retomar Execução do Script () até colocar em pausa na linha correta.

   Observação

   Se fez uma pausa numa linha diferente, tem uma extensão do browser que regista um click serviço de escuta de eventos em todas as páginas Web que visitar. Está em pausa no click serviço de escuta da extensão. Se utilizar o Modo InPrivate para navegar em privado, o que desativa todas as extensões, poderá ver que coloca sempre em pausa a linha de código pretendida.

Os Pontos de Interrupção do Serviço de Escuta de Eventos são apenas um dos muitos tipos de pontos de interrupção disponíveis nas DevTools. Memorize todos os diferentes tipos para o ajudar a depurar diferentes cenários o mais rapidamente possível. Para saber quando e como utilizar cada tipo, consulte Colocar o código em pausa com pontos de interrupção.

Passo 4: percorrer o código

Uma causa comum de erros é quando um script é executado na ordem errada. Percorrer o código permite-lhe percorrer o runtime do seu código. Percorre uma linha de cada vez para o ajudar a descobrir exatamente onde o seu código está a ser executado numa ordem diferente do esperado. Experimente agora:

1. Clique em Passar por cima da próxima chamada de função (). O DevTools executa o seguinte código sem entrar no mesmo:

   if (inputsAreEmpty()) {
   

   As DevTools ignoram algumas linhas de código, porque inputsAreEmpty() são avaliadas como false, para if que o bloco de código da instrução não seja executado.

2. Na ferramenta Origens de DevTools, clique em Avançar para a próxima chamada de função () para percorrer o runtime da função, uma linha de updateLabel() cada vez.

Esta é a ideia básica de passar pelo código. Se observar o código em get-started.js, pode ver que o erro está provavelmente algures na updateLabel() função. Em vez de percorrer todas as linhas de código, pode utilizar outro tipo de ponto de interrupção (um ponto de interrupção de linha de código) para colocar o código mais próximo da localização provável do erro.

Passo 5: Definir um ponto de interrupção de linha de código

Os pontos de interrupção de linha de código são o tipo de ponto de interrupção mais comum. Quando chegar à linha de código específica que pretende colocar em pausa, utilize um ponto de interrupção de linha de código.

1. Observe a última linha de código em updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. O número da linha para label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; é 34. Clique na linha 34. DevTools apresenta um círculo vermelho à esquerda de 34. O círculo vermelho indica que um ponto de interrupção de linha de código está nesta linha. As DevTools são sempre interrompidas antes de esta linha de código ser executada.

3. Clique no botão Retomar execução do script ():

   

   O script continua a ser executado até atingir a linha 34. Nas linhas 31, 32 e 33, a DevTools imprime os valores de cada variável à direita do ponto e vírgula em cada linha. Estes valores são:

   • addend1 = "5"
   • addend2 = "1"
   • sum = "51"

Passo 6: Verificar os valores das variáveis

Os valores de addend1, addend2e sum parecem suspeitos. Estes valores são moldados em aspas, o que significa que cada valor é uma cadeia. Esta é uma boa pista para a causa do erro. O próximo passo consiste em recolher mais informações sobre estes valores variáveis. O DevTools fornece várias formas de examinar valores variáveis.

Examinar valores de variáveis no painel Âmbito

Se colocar em pausa numa linha de código, o painel Âmbito apresenta as variáveis locais e globais atualmente definidas, juntamente com o valor de cada variável:

O painel Âmbito também apresenta variáveis de fecho, conforme aplicável. Se quiser editar um valor de variável, faça duplo clique no valor no painel Âmbito . Se não colocar em pausa uma linha de código, o painel Âmbito estará vazio.

Examinar valores de variáveis através de Expressões de monitorização

O painel Monitorização permite-lhe monitorizar os valores das variáveis (como sum) ou expressões (como typeof sum). Pode armazenar qualquer expressão JavaScript válida numa expressão watch.

1. Selecione o separador Ver .

2. Clique em Adicionar expressão watch ().

3. Escreva a expressão typeof sumwatch e, em seguida, prima Enter:

O painel Deteção apresenta typeof sum: "string". O valor à direita dos dois pontos é o resultado da expressão watch. O erro deve-se a sum ser avaliado como uma cadeia, quando deve ser um número.

Se a janela DevTools for larga, o painel Watch é apresentado no painel Depurador , que é apresentado à direita.

Examinar valores de variáveis através da Consola

A Consola permite-lhe ver console.log() a saída. Também pode utilizar a Consola para avaliar instruções JavaScript arbitrárias enquanto o depurador é colocado em pausa numa instrução de código. Para depurar, pode utilizar a Consola para testar potenciais correções de erros.

1. Se a ferramenta Consola estiver fechada, prima Esc para abri-la. A ferramenta Consola é aberta no painel inferior da janela DevTools.

2. Na Consola, escreva a expressão parseInt(addend1) + parseInt(addend2). A expressão é avaliada para o âmbito atual, dado que o depurador está em pausa numa linha de código onde addend1 e addend2 estão no âmbito.

3. Prima Enter. A DevTools avalia a instrução e imprime 6 na Consola, que é o resultado correto que espera que a demonstração produza:

   

Passo 7: Aplicar uma correção ao código devolvido e, em seguida, ao código fonte real

Identificámos uma possível correção do erro. Em seguida, edite o código JavaScript diretamente na IU de DevTools e, em seguida, volte a executar a demonstração para testar a correção, da seguinte forma:

1. Clique em Retomar execução do script ().

2. No painel Editor, substitua a linha var sum = addend1 + addend2 por var sum = parseInt(addend1) + parseInt(addend2).

3. Prima Ctrl+S (Windows, Linux) ou Comando+S (macOS) para guardar a alteração.

4. Clique em Desativar pontos de interrupção (). O ícone do ponto de interrupção muda para cinzento para indicar que o ponto de interrupção está inativo. Enquanto a opção Desativar pontos de interrupção está definida, a DevTools ignora quaisquer pontos de interrupção definidos por si. A página Web de demonstração apresenta agora o valor correto:

   

5. Experimente a demonstração com valores diferentes. A demonstração agora calcula corretamente.

6. Ao depurar o seu próprio projeto, depois de identificar a correção, corrige o código fonte real no servidor, como editar o código fonte local e, em seguida, voltar a implementar o código fixo no servidor. Os passos anteriores aplicam apenas uma correção a uma cópia local temporária do código que é enviado a partir do servidor.

Próximas etapas

Parabéns! Agora já sabe como aproveitar ao máximo as DevTools do Microsoft Edge ao depurar JavaScript. As ferramentas e métodos que aprendeu neste artigo podem poupar-lhe inúmeras horas.

Este artigo mostrou duas formas de definir pontos de interrupção. O DevTools também fornece formas de definir pontos de interrupção para colocar o código em pausa quando determinadas condições são cumpridas, tais como:

• Pontos de interrupção condicionais que só são acionados quando a condição fornecida é verdadeira.
• Pontos de interrupção em exceções capturadas ou não identificadas.
• Pontos de interrupção XHR que são acionados quando o URL pedido corresponde a uma subcadeia que fornece.

Para obter mais informações sobre quando e como utilizar cada tipo de ponto de interrupção, consulte Colocar o código em pausa com pontos de interrupção.

Para obter mais informações sobre os botões de depurador para percorrer o código, veja Passar por cima da linha de código em "Funcionalidades de depuração de JavaScript".

Consulte também

• Funcionalidades de depuração de JavaScript – utilizar a IU do depurador na ferramenta Origens.
• Descrição geral da ferramenta Origens – apresenta o depurador JavaScript e o editor de código.

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é da autoria de Kayce Bascos.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.