Depuração e Depurador - JavaScript

Depuração é o processo de encontrar erros e bugs em um programa. Um instrumento especial, chamado depurador, é usado para realizar a depuração. Além de buscar bugs e erros, a depuração e o depurador oferecem uma excelente maneira de entender o fluxo e a execução do programa, as ações que ocorrem, como essas ações são executadas e, ultimamente, enriquecer as habilidades e compreensão do desenvolvimento.

Quanto aos depuradores para programas em JavaScript, podemos usar os depuradores integrados aos navegadores web. Muitos navegadores populares oferecem capacidades de depuração. Neste caso, usaremos o depurador integrado no Chrome DevTools(Ferramentas do desenvolvedor), já que o Google Chrome é o navegador mais comum. No entanto, trabalhar com depuradores em outros navegadores será muito semelhante.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
    const numbers = [5, 3, 6, 2, 5, 1];
    
    for(let i = 0; i < numbers.length-1; i++) {
        for(let j = i + 1; j < numbers.length; j++) {
            if(numbers[i] > numbers[j]) {
                const temp = numbers[j];
                numbers[j] = numbers[i];
                numbers[i] = temp;
            }
        }
    }
    console.log("numbers:", numbers);
    </script>
</body>
</html>

Aqui, o código JavaScript realiza uma simples ordenação de um array de números. Primeiro, percorremos todos os elementos do array até o penúltimo em um loop i, e comparamos o elemento atual i com todos os elementos subsequentes em um loop j. Se um dos elementos subsequentes (numbers[j]) for menor que o elemento atual (numbers[i]), trocamos suas posições. Após compararmos o elemento atual numbers[i] com todos os subsequentes (numbers[j]) e colocarmos em numbers[i] o menor elemento, aumentamos o valor de i e passamos para a comparação do próximo elemento com todos os subsequentes.

Para observar detalhadamente como o programa ordena o array, utilizaremos a depuração. Para isso, carregaremos a página com o código JavaScript no Google Chrome e acessaremos as ferramentas de desenvolvedor (isso pode ser feito usando a combinação de teclas Ctrl+Shift+I). Em seguida, na aba "Fontes"(Sources) das ferramentas de desenvolvimento, encontraremos o arquivo onde está localizado o código JavaScript (no meu caso, a página web index.html). Este arquivo será aberto na parte central.

Depuração de código JavaScript no Chrome DevTools.

No menu em árvore à esquerda, encontraremos o arquivo onde está localizado o código JavaScript (no meu caso, a página web index.html). E este arquivo será aberto na parte central.

Configuração de Pontos de Interrupção

Para inspecionar o programa em uma linha específica de código, devemos estabelecer um ponto de interrupção (breakpoint). No Chrome DevTools, isso pode ser feito clicando no número da linha desejada. Após estabelecer um ponto de interrupção, a linha de código será marcada com uma etiqueta azul.

Configuração de um ponto de interrupção no código JavaScript no Chrome DevTools

Assim, na captura de tela é possível ver que eu configurei um ponto de interrupção no arquivo index.html na linha 14.

const temp = numbers[j];

Como alternativa, você pode clicar no número da linha do código e, no menu de contexto que aparece, selecionar a opção "Adicionar ponto de interrupção" (Add breakpoint) para configurar um ponto de interrupção na linha especificada.

Configuração de um ponto de interrupção no Chrome DevTools

Para remover um ponto de interrupção, basta clicar na marca azul no número da linha.

Se atualizarmos a página no navegador, quando o código JavaScript for executado, o programa irá parar no ponto de interrupção configurado:

Execução do programa JavaScript e pontos de interrupção no código no Chrome DevTools

E neste ponto, podemos investigar o estado atual do programa.

Ao parar no ponto de interrupção, podemos ver parte das informações diretamente após o código fonte do arquivo, por exemplo, ao passar o mouse sobre a variável desejada, seu valor será exibido. No entanto, para informações mais detalhadas, a coluna da direita é designada, onde é possível ver os valores atuais das variáveis globais e locais, valores dos parâmetros, pilha de chamadas de funções e outras informações.

Por exemplo, a partir da captura de tela acima, é possível ver que na primeira execução da linha 14, o valor da variável i é 0, e o valor da variável j é 1.

Controle do andamento da depuração JavaScript no Chrome DevTools

Dessa forma, podemos configurar vários pontos de interrupção e investigar detalhadamente a execução do programa.

Além dos pontos de interrupção comuns, o Chrome DevTools permite configurar outros tipos de pontos de interrupção. Por exemplo, pontos de interrupção condicionais permitem parar a execução do programa se uma condição específica for atendida. Pontos de interrupção DOM permitem parar a execução quando o conteúdo de uma página web é alterado dinamicamente. Pontos de interrupção de manipuladores de eventos permitem parar a execução quando um evento específico ocorre na página web. Pontos de interrupção XHR permitem parar o programa durante a execução de uma solicitação Ajax. Assim, podemos investigar detalhadamente vários aspectos do funcionamento do programa.