A depuração em JavaScript envolve identificar e corrigir erros analisando o comportamento do tempo de execução, rastreando o fluxo do programa e usando ferramentas como consoles de navegador, depuradores e técnicas de registro. Abaixo estão vários métodos para depuração em JavaScript.
1. Usando a palavra-chave do depurador
A palavra-chave debugger força o mecanismo JavaScript a interromper a execução em um determinado ponto. Quando encontrado, ele pausa a execução do código e abre a ferramenta de depuração do navegador.
Sintaxe:
depurador;
Exemplo:

function sum(a, b) { 
   debugger; // Execution stops here 
   return a   b; 
} 

let result = sum(5, 10); 
// When run, code will pause at the debugger line

Isso permite que você inspecione variáveis ​​​​e o estado do programa naquele ponto exato usando as ferramentas de desenvolvedor do navegador.
2. Usando console.log()
console.log() envia dados para o console do navegador, ajudando você a rastrear valores e fluxo do programa durante o tempo de execução.
Sintaxe:

console.log(value)
Example:
let name = "John"; 
let age = 30; 

console.log("Name: "   name); 
// Output: Name: John 
console.log("Age: ", age); 
// Output: Age: 30

Colocando instruções console.log() em todo o seu código, você pode verificar se as variáveis ​​​​têm os valores esperados.
3. Usando pontos de interrupção
Os pontos de interrupção podem ser definidos diretamente nas ferramentas do desenvolvedor do navegador. Eles interrompem a execução do código em uma linha específica, permitindo inspecionar o estado do programa naquele momento.
Etapas para definir pontos de interrupção:

1. Abra as Ferramentas do Desenvolvedor (pressione F12 ou clique com o botão direito e selecione Inspecionar).
2. Vá para a guia Fontes.
3. Selecione o arquivo JavaScript e clique no número da linha para definir um ponto de interrupção.
4. A execução do código será pausada nessa linha e todas as variáveis ​​e estados poderão ser inspecionados. Exemplo:

function multiply(a, b) { 
   return a * b; 
} 

deixe o resultado = multiplicar(2, 5);
// Defina um ponto de interrupção aqui e inspecione os valores
Neste exemplo, após definir um ponto de interrupção na função multiplicar(), você pode inspecionar os valores de a e b nas Ferramentas do Desenvolvedor.
4. Usando console.warn() e console.error()
Esses métodos funcionam como console.log(), mas a saída é visualmente distinta no console, ajudando a diferenciar avisos ou erros.
Sintaxe:

console.warn(message); 
console.error(message);

Exemplo:

let age = 17; 

if (age 



Neste caso, console.warn() mostrará uma mensagem de aviso amarela, enquanto console.error() exibirá um erro em vermelho.

5. Usando instruções try…catch

try…catch é usado para lidar com erros de tempo de execução normalmente, permitindo registrar erros e evitar que o aplicativo trave.

Sintaxe:



try { 
   // Code that may throw an error 
} catch (error) { 
   console.error(error.message); 
} 




Exemplo:



 try { 
   let result = JSON.parse("invalid JSON string"); 
} catch (error) { 
   console.error("An error occurred: ", error.message); 
   // Logs error without stopping the app 
}




O bloco try…catch capturará o erro de análise JSON e o registrará no console sem travar o aplicativo.

6. Usando ferramentas de monitoramento de desempenho

Para depuração de desempenho, a guia Desempenho nas Ferramentas do desenvolvedor ajuda a monitorar o tempo de execução da função, o uso de memória e gargalos de desempenho.

Passos:


Abra as ferramentas do desenvolvedor (pressione F12).
Vá para a guia Desempenho.
Clique em Gravar para começar a monitorar a execução do código.
Execute ações em seu aplicativo para coletar dados.
Pare a gravação para analisar o cronograma de desempenho.
Exemplo:



console.time("loop"); 
for (let i = 0; i 



Este exemplo usa console.time() e console.timeEnd() para medir quanto tempo um bloco de código leva para ser executado.

Ao aplicar esses métodos e técnicas mais avançadas, como monitoramento de desempenho, você pode depurar e resolver problemas em seu código JavaScript com eficácia.

Se você está aprendendo JavaScript, siga meus tutoriais passo a passo no Medium: https://medium.com/@CodingAdventure