Depuração do código JavaScript

Não importa quanto de um desenvolvedor experiente você seja, você encontrará erros. É apenas a natureza humana cometer erros. Às vezes comemos um erro de sintaxe ou algum erro lógico. Não importa qual seja o erro, você deseja corrigi -lo o mais rápido possível.

Depuração Esse processo é encontrar erros e corrigi -los quando você examina seu código ou programa. Embora o JavaScript seja difícil de depurar, faremos suas vidas fáceis. Hoje neste artigo, falaremos sobre como depurar o código JavaScript.

JavaScript Debugger

Todos os navegadores modernos têm depuradores de javascript embutidos. Esses depuradores nos ajudam mostrando esses erros. Esses depuradores também podem ser ativados ou desligados, dependendo de nossas necessidades.

O interessante sobre esses depuradores é que, com isso, também podemos definir pontos de interrupção. Pontos de interrupção são colocados em nosso código onde interrompemos a execução do código. Quando o código é interrompido, podemos verificar os erros e examinar as variáveis.

Como o Google Chrome é um navegador muito famoso, usaremos o Chrome na maioria das partes deste artigo. No entanto, no final, mostraremos como ativar a depuração de JavaScript em outros navegadores também.

Para começar a depurar no Google Chrome Pressione o F12 chave. Também podemos pressionar Ctrl+Shift+i Para abrir o depurador. No entanto, mesmo que esses dois não funcionem, tente clicar com o botão direito do mouse no mouse em qualquer lugar dentro da janela da guia do navegador. Clique em inspecionar E depois disso, vá para o console.

Usando console.Método log ()

O Google Chrome suporta a depuração, portanto, podemos usar console.registro() em nosso código JavaScript para exibi -lo dentro de nossa janela de console.

Exemplo

const str = "Vamos depurar no console";
// Vamos ver isso na janela do console
console.log (str);

Agora, quando clicarmos a F12 e irmos ao nosso console, veremos:

Como definir pontos de interrupção

Também podemos definir pontos de interrupção na janela do depurador. Como mencionado anteriormente, a cada ponto de interrupção que definimos, a execução do código será interrompida. Em seguida, examinaremos nosso código e encontraremos o erro. Se não encontrarmos o erro nesse ponto de interrupção, adicionaremos outro ponto de interrupção. É muito fácil, pois podemos continuar o código de execução com apenas um botão de clique (normalmente reprodução do botão).

Suponha que temos um botão. Toda vez que clicarmos no botão, ele agrega um valor ao valor anterior. O valor padrão será 0. Agora, se queremos depurar isso usando o ponto de interrupção, precisamos definir um ponto de interrupção. Se o valor do contador não estiver aumentando com o clique, sabemos que o problema está no ouvinte do evento, clique.

Para colocar um ponto de interrupção no ouvinte do evento, clique F12. Isso irá direcioná -lo para a janela do console. No lado do console, clique na guia Fontes e depois prossiga para o ponto de interrupção dos ouvintes do evento. Neste clique nos eventos do mouse e depois marque a opção de clique.

Parabéns que você definiu seu primeiro ponto de interrupção. Sempre que você executar o programa, ele parará no evento de clique do ouvinte do evento do mouse. Podemos retomá -lo clicando no botão de currículo na parte superior da guia Fontes.

Html:

0

JavaScript:

const btn = documento.getElementById ("Vanish-btn");
Deixe o valor = 1;
btn.addEventListener ("clique", function ()
btn.inerhtml = valor ++;
)

Usando a palavra -chave do depurador

É o mesmo que o ponto de interrupção explicado anteriormente, exceto que é feito através do código JavaScript e não manualmente. Usamos a palavra -chave do depurador sempre que desejamos depurar um código. Palavras -chave depurador basicamente interrompem o fluxo de execução do código como um ponto de interrupção. Depois de interromper a execução, ele chama a função de depuração interna. Esta função do depurador funciona da mesma forma que um ponto de interrupção.

Suponha que queremos adicionar duas variáveis. No entanto, antes de exibi -los como um alerta, eu quero depurar. O código a seguir fornecerá a solução para isso:

Seja num1 = 5;
Seja num2 = 10;
depurador;
alerta (num1+num2);

A palavra -chave do depurador força um ponto de interrupção ou interrompe a execução do código e invoca a função de depuração. Se for necessária alguma depuração, a função do depurador será chamada; Caso contrário, nada é feito.

Depuração em diferentes navegadores

A prática comum para começar a depurar em JavaScript é clicando em inspecionar ou pressionando a tecla F12 em seu navegador. No entanto, se isso não funcionar, siga os comandos abaixo para abrir o menu do depurador.

Google Chrome

• Clique no botão de menu no canto superior direito do Google Chrome
• Clique em mais ferramentas
• Clique em ferramentas de desenvolvedor
• Selecione console ou fontes de acordo com sua necessidade

Mozilla Firefox

• Ao abrir o navegador, clique no menu
• Depois disso, clique no desenvolvedor da web
• Clique no console da web

Microsoft borda

• Ao abrir o navegador, selecione Ferramentas de desenvolvedor no menu
• Em seguida, selecione Console

Ópera

• Navegador aberto
• Selecione o menu e depois o desenvolvedor selecionado
• Agora selecione ferramentas de desenvolvedor
• Em seguida, clique no console

Safári

• Vá para o menu principal e clique nas preferências do Safari
• Clique na opção avançada
• Na barra de menus, selecione Ativar show desenvolver menu.
• Quando o desenvolvimento é visto no menu, clique em Mostrar console de erro.

Conclusão

Existem muitos métodos de depuração disponíveis no JavaScript. Explicamos os métodos mais utilizados/comuns e fáceis para depurar nosso código JavaScript. Com o desenvolvimento do JavaScript, você precisará depurar repetidamente. Eu sugiro que você salve este artigo como um marcador no seu navegador para que você não precise pesquisar repetidamente.