Neste artigo, vamos explicar como depurar JavaScript usando Devtools no Chrome Step by Step. Se você deseja depurar seu código JavaScript no Chrome, deve seguir estas etapas, conforme mencionado abaixo.

Visão Geral do Projeto

Vou demonstrar um exemplo de como depurar o código JavaScript no Chrome. Nesta etapa, vou dar uma descrição básica do código. Este projeto é sobre a operação do módulo de computação entre dois números. Este exemplo permite que você passe o valor de dividendo e divisor, respectivamente. Posteriormente, ao clicar no botão de computação, levará um minuto para calcular o mod entre dois números e fornecerá a saída. A sintaxe da operação de Modulo é a seguinte:

x mod y = r

Onde x = dividendo, y = divisor e r = restante

Existem dois arquivos neste projeto, .html e .arquivo js. O arquivo JavaScript contém 5 funções para calcular o MOD de dois números:

1. Clique em Manipulador: Dá uma mensagem de alerta se um ou ambos os campos de entrada estiverem vazios
2. As entradas estão vazias (): Esta função é usada para verificar se os campos de entrada estão vazios ou não
3. Updatelabel (): Esta função é usada para calcular o mod de dois números
4. getNumber1 (): Usado para obter o valor do primeiro número
5. getNumber2 (): Usado para obter o valor do segundo número

O código JavaScript está ilustrado abaixo:

função onclick ()
if (inputSareEmpty ())
rótulo.TextContent = 'Alerta: você precisa inserir números nos dois campos.';
retornar;

updatelabel ();

função inputSareEmpty ()
if (getNum1 () === "|| getNum2 () ===")
retornar true;
outro
retorna falso;


função updatelabel ()
var value1 = getNum1 ();
var value2 = getNum2 ();
var mod = "value1" % "value2"
rótulo.textContent = value1 + ' %' + value2 + '=' + mod;

função getNum1 ()
Retornar entradas [0].valor;

função getNum2 ()
Retornar entradas [1].valor;

O código do arquivo HTML está ilustrado abaixo:

Calcule o mod entre dois números

Insira o valor do dividendo

Digite o valor do divisor

Compute mod (%)

Saída do projeto:

Detecção de bugs

A parte triste é que sempre que executaremos este código, ele mostraria alguns bugs para você. Como você pode observar claramente no exemplo abaixo, quando estamos inserindo os valores, a saída é indefinida em vez de um resultado real. Então, agora temos que detectar a causa original do bug, que é explicado brevemente no mesmo artigo posteriormente.

Exemplo

Neste exemplo, vamos passar valores que dão a saída indefinida, como mostrado na figura abaixo.

Então, agora temos que consertar este bug rapidamente. Nesta etapa, nosso alvo principal é detectar a fonte de bugs. Para detecção rápida do bug, você deve depurar o código JavaScript no Chrome.

Para isso, você precisa executar o aplicativo no Chrome e depois deve abrir o Devtool pressionando as chaves curtas Ctrl+Shift+i. Depois de abrir o Devtool, você poderá ver a tela mostrada abaixo. Além de muitas tarefas executadas pela DevTool, ele também pode monitorar solicitações, alterar o CSS.

Visão geral da ferramenta de desenvolvedores

Você pode depurar seu código JavaScript na guia Painel de origem. Possui 3 partes como mostrado abaixo:

1. Página do navegador de arquivos: Solicitações de cada arquivo podem ser listadas nesta guia.
2. Editor de código: Ele exibe o conteúdo do arquivo
3. Painel de depuração de JavaScript: Usado para inspecionar JavaScript

Depuração de código

A maneira mais simples de depurar um bug no seu código é que você precisa inserir o console.registro() função dentro do seu código para inspecionar valores simultaneamente.

função updatelabel ()
var value1 = getNum1 ();
console.log ('value1:', value1);
var value2 = getNum2 ();
console.log ('value2:', value2);
var mod = parseint (value1) % parseint (value2);
console.log ('resultado:', mod);
rótulo.textContent = value1 + ' %' + value2 + '=' + mod;

Apesar de console.registro() A função pode ser uma boa opção para detectar os erros, mas os pontos de interrupção podem ser uma opção mais eficaz, pois permite pausar código durante sua execução e analisar o valor correspondente. Além disso, um ponto de interrupção é melhor do que o console.log () porque trabalhar com console.log () você deve observar muitas etapas que precisam ser feitas manualmente para visualizar valores na janela do console, enquanto os pontos de interrupção facilitam o trabalho diretamente.

Inserção de pontos de interrupção no código

Caso você volte e dê uma olhada na funcionalidade do aplicativo, você saberá que o resultado da operação do Modulo parece estar incorreto depois de clicar no "botão de computação". Portanto, você precisará colocar um ponto de interrupção antes do evento de clique.

Os pontos de interrupção do ouvinte de eventos ajudam você a encontrar o evento específico que você deseja cessar, expandindo o grupo correspondente, como mostrado abaixo. Como a imagem mostra claramente que, ao verificar a caixa de cliques, interromperá a execução onde quer que o evento de clique no ouvigo esteja presente.

Entre no seu código

A figura abaixo ilustra que, se você quiser parar a execução de uma linha específica e.g. Dizemos que a linha 21, então clicaremos nela e observaremos um marcador azul nessa linha específica que garante que a execução pare automaticamente quando atingir a linha 21.

Detectando a causa de um bug

Como colocamos um ponto de interrupção na linha 21, o que significa que o código sempre faz uma pausa sempre que a execução do código atinge essa linha. Quando o código é pausado em uma determinada linha, o painel de escopo especifica suas variáveis ​​locais e globais.

Como você vê na figura abaixo, ambos os valores não são inteiros. Eles estão fechados em citações, como você vê na figura abaixo, bem como o valor mod também parece suspeito. Finalmente, a fonte do bug é detectada.

Corrigindo erro

Agora você pode modificar o código e testá -lo novamente. Clique no ícone de currículo, como mostrado à direita da tela da janela. Agora substitua a linha 20 pela linha mencionada abaixo e salve as alterações.

var mod = parseint (value1) % parseint (value2);

Em seguida, desative pontos de interrupção e teste o código com valores diferentes para verificar os resultados corretos.

A saída de 24%9 é a seguinte:

A saída de 5%3 é a seguinte:

Conclusão

JavaScript é o idioma mais popular e sua necessidade está aumentando dia a dia. Quase em todos os lugares JavaScript está sendo usado. Neste artigo, explicamos a depuração do código JavaScript no Chrome. Posteriormente, discutimos cada etapa em profundidade. Exemplo de imagens também são fornecidas para cada etapa para ajudá -lo a entender.