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.
![](https://cdn.wiki-base.com/9595141/debugging_javascript_in_browser_with_examples.png.webp)
O console.log()
não é específico para navegadores. Também está disponível em outros mecanismos JavaScript.
2. Usando o depurador
A debugger
palavra-chave interrompe a execução do código e chama a função de depuração.
O debugger
está 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.
![](https://cdn.wiki-base.com/9595141/debugging_javascript_in_browser_with_examples_2.png.webp)
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.
![](https://cdn.wiki-base.com/9595141/debugging_javascript_in_browser_with_examples_3.png.webp)
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.
![](https://cdn.wiki-base.com/9595141/debugging_javascript_in_browser_with_examples_4.png.webp)
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.