Depurando JavaScript no navegador (com exemplos)

Neste tutorial, você aprenderá sobre depuração em JavaScript com a ajuda de exemplos.

Você pode e encontrará erros ao escrever programas. Os erros não são necessariamente ruins. Na verdade, na maioria das vezes, eles nos ajudam a identificar problemas com nosso código. É essencial que você saiba como depurar seu código e corrigir erros.

A depuração é o processo de examinar o programa, localizar o erro e corrigi-lo.

Existem diferentes maneiras de depurar seu programa JavaScript.

1. Usando console.log ()

Você pode usar o console.log()método para depurar o código. Você pode passar o valor que deseja verificar no console.log()método e verificar se os dados estão corretos.

A sintaxe é:

 console.log(object/message);

Você pode passar o objeto console.log()ou simplesmente uma string de mensagem.

No tutorial anterior, usamos o console.log()método para imprimir a saída. No entanto, você também pode usar esse método para depuração. Por exemplo,

 let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )

Usar o console.log()método no navegador abre o valor na janela do depurador.

Trabalho do método console.log () no navegador

O console.log()não é específico para navegadores. Também está disponível em outros mecanismos JavaScript.

2. Usando o depurador

A debuggerpalavra-chave interrompe a execução do código e chama a função de depuração.

O debuggerestá disponível em quase todos os mecanismos JavaScript.

Vamos ver um exemplo,

 let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);

Vamos ver como você pode usar o depurador em um navegador Chrome.

Trabalho de depurador no navegador

O programa acima pausa a execução do programa na linha que contém o debugger.

Você pode então retomar o controle de fluxo após examinar o programa.

O resto do código será executado quando você retomar o script pressionando play no console.

Trabalho de depurador no navegador

3. Definindo pontos de interrupção

Você pode definir pontos de interrupção para o código JavaScript na janela do depurador.

JavaScript irá parar de executar em cada ponto de interrupção e permite que você examine os valores. Então, você pode retomar a execução do código.

Vamos ver um exemplo definindo um ponto de interrupção no navegador Chrome.

Trabalho de pontos de interrupção no navegador

Você pode definir pontos de interrupção por meio da ferramenta Developers em qualquer lugar do código.

Definir pontos de interrupção é semelhante a colocar um depurador no código. Aqui, você apenas define pontos de interrupção clicando no número da linha do código-fonte em vez de chamar manualmente a função de depuração.

Nos métodos acima, usamos o navegador Chrome para mostrar os processos de depuração para simplificar. No entanto, não é sua única opção.

Todos os IDEs bons fornecem uma maneira de depurar o código. O processo de depuração pode ser um pouco diferente, mas o conceito por trás da depuração é o mesmo.

Artigos interessantes...