Exercício – Utilizar o depurador incorporado do Node.js

Concluído

Para colocar em prática os conceitos de depuração que você acabou de ver, você criará um aplicativo Node.js curto para calcular o número N da sequência de Fibonacci.

A sequência de Fibonacci é um conjunto de números que começa com os números 0 e 1, com todos os outros números seguintes sendo a soma dos dois números anteriores. A sequência prossegue desta forma:

0, 1, 1, 2, 3, 5, 8, 13, 21...

Vamos criar um novo aplicativo Node.js para ilustrar o conceito.

Abrir projeto no contêiner de desenvolvimento

Este módulo de treinamento oferece um contêiner de desenvolvimento, seja em um navegador ou para seu computador local. Este contêiner fornece todo o ambiente necessário para que você possa usar este módulo de treinamento sem ter que instalar um IDE ou Node.js. Você não precisa saber nada sobre o contêiner para concluir este módulo de treinamento.

  1. Inicie o processo para criar um novo espaço de código GitHub na main ramificação do MicrosoftDocs/node-essentials repositório GitHub.

  2. Na página Criar espaço de código, revise as definições de configuração de espaço de código e selecione Criar espaço de código

    Screenshot of the confirmation screen before creating a new codespace.

  3. Aguarde até que o espaço de código inicie. Este processo de arranque pode demorar alguns minutos.

  4. Abra um novo terminal no codespace.

    Gorjeta

    Você pode usar o menu principal para navegar até a opção de menu Terminal e, em seguida, selecionar a opção Novo Terminal.

    Screenshot of the codespaces menu option to open a new terminal.

  5. Valide se o Node.js está instalado em seu ambiente:

    node --version
    

    O contêiner de desenvolvimento usa uma versão Node.js LTS. A versão exata pode ser diferente.

  6. Os restantes exercícios deste projeto decorrem no contexto deste contentor de desenvolvimento.

Preparar o ambiente

Antes de começarmos o exercício, temos de preparar o código e o ambiente.

  1. Abra a ./nodejs-debug subpasta e crie um novo arquivo JavaScript chamado myfibonacci.js. O arquivo que já existe na pasta é uma solução para o exercício, com a correção necessária para o bug encontrado durante a depuração.

  2. Cole este código no ficheiro:

    function fibonacci(n) {
      let n1 = 0;
      let n2 = 1;
      let sum = 0;
    
      for (let i = 2; i < n; i++) {
        sum = n1 + n2;
        n1 = n2;
        n2 = sum;
      }
    
      return n === 0 ? n1 : n2;
    }
    
    const result = fibonacci(5);
    console.log(result);
    
  3. Salve o arquivo, CTRL + S.

  4. Clique com o botão direito do mouse na ./nodejs-debug subpasta e selecione Open in integrated terminal e execute o programa usando o seguinte comando:

    node fibonacci.js
    

O aplicativo deve exibir o resultado 3 (três) no console. Ops, parece que há um bug lá porque esperávamos ver 5 (cinco) como resultado. Vamos compreender o que correu mal ao utilizar o depurador incorporado do Node.js.

Comandos do depurador cheat sheet

O depurador interno Node.js vem com um conjunto de comandos que você pode usar para controlar a execução do seu programa. Aqui está um cheat sheet rápido dos comandos mais comuns:

Comando Description
c Continuar. Continua a execução, até ao próximo ponto de interrupção ou ao final do seu programa.
next Ignorar. Este comando é semelhante ao step comando, exceto que, se a próxima linha de código for uma chamada de função, ele executará a função sem entrar nela.
s avança para a próxima instrução. Este comando é semelhante aonext comando, exceto que, se a próxima linha de código for uma chamada de função, vá para a primeira linha do código desta função.
sb() adicione um ponto de interrupção na linha atual.
exec <EXPR> avalie uma expressão no contexto de execução atual. Este comando é útil para obter informações sobre o estado atual. Por exemplo, poderá obter o valor de uma variável denominada i com exec i.
+ Ctrl D Pare o depurador.

Iniciar o depurador incorporado

Inicie o programa novamente, desta vez com o depurador integrado ativado. Digite este comando no terminal:

node inspect fibonacci.js

No terminal, você deve ver o prompt do depurador exibido. Agora, entre no código executando o até que o s + <Enter> ponto de execução esteja localizado no início da fibonacci função, assim:

break in fibonacci.js:2
  1 function fibonacci(n) {
> 2   let n1 = 0;
  3   let n2 = 1;
  4   let sum = 0;
debug>

Neste ponto, podemos verificar o valor do parâmetro n que é passado na função executando o seguinte comando:

exec n

Você deve ver 5 (cinco) exibido como o resultado no console. Continue a entrar no código executando o comando até que o s ponto de execução esteja dentro do início do loop. São necessários cinco passos com o s comando para chegar a este ponto:

break in fibonacci.js:7
  5
  6   for (let i = 2; i < n; i++) {
> 7     sum = n1 + n2;
  8     n1 = n2;
  9     n2 = sum;
debug>

Nota

Você deve ter notado que para se mover através da for(...) {} linha requer várias etapas com os comandos de depuração. Isto acontece porque existem múltiplas instruções nesta linha. Ao pisar, você passa para a próxima instrução em seu código. Normalmente, existe uma instrução por linha. Se esse não for o caso, você precisará de várias etapas para passar para a próxima linha.

Localizar o erro com pontos de interrupção

Agora vamos adicionar um ponto de interrupção nesta linha para que possamos mover-nos rapidamente pelas iterações de loop. Digite o seguinte comando no terminal:

sb()

Deverá ver as mesmas linhas apresentadas novamente na consola, a indicar que foi definido um ponto de interrupção nesta linha. Quando o ponto de execução atual se mover, você verá um asterisco * na linha onde definiu o ponto de interrupção.

Avance para a próxima iteração de loop executando o c comando no terminal:

c

Podemos verificar o estado atual da iteração com o comando e ver o exec valor de várias variáveis usando uma matriz como parâmetro de comando. Para ver os valores do iterador i e do total sum, usamos a sintaxe [i, sum]. Digite este comando no terminal:

exec [i, sum]

Você deve ver o resultado [ 3, 1 ] no console.

O código ainda não atualizou o sum valor da variável para a iteração atual, que é 3 (três). O valor da variável ainda mostra o número de sum Fibonacci para a iteração anterior. Aqui está o cálculo que estamos usando no código para obter o valor atual sum :

fibonacci(2) = fibonacci(0) + fibonacci(1)
             = 0 + 1
             = 1

Com base em nosso cálculo, parece que nosso programa é executado corretamente até este ponto.

Continue para a próxima iteração de loop executando o comando no terminal e, em seguida, verifique o c estado novamente:

c
exec [i, sum]

Você deve ver o resultado [ 4, 2 ] no console.

Agora estamos no ponto imediatamente antes do número de iteração em que estamos interessados, que é 5 (cinco). Para ser cauteloso, vamos avançar passo a passo através desta iteração usando o s comando. Tente alcançar o nosso ponto de interrupção anterior, mas um passo de cada vez. Não ultrapasse o ponto de interrupção!

O que aconteceu?

Corrigir o erro

Depois de verificar a condição i < ndo loop, a execução de repente saltou para a linha que tem o return comando. Aqui está o que você deve ver no terminal:

break in fibonacci.js:12
 10   }
 11
>12   return n === 0 ? n1 : n2;
 13 }
 14

Encontrámos o nosso erro! Em vez de atualizar a soma para a iteração 5 (cinco), o código saltou do loop. É por isso que obtivemos o resultado da iteração 3 anterior (três) em nossa execução inicial.

Precisamos corrigir a condição de loop no código fibonacci.js. No editor de código, altere o valor da instrução de teste de menor para < menor ou igual a <=:

for (let i = 2; i <= n; i++) {
  sum = n1 + n2;
  n1 = n2;
  n2 = sum;
}

Salve as alterações no editor de códigos e saia do depurador selecionando Ctrl+D.

Agora execute o seu programa novamente no terminal:

node fibonacci.js

Você deve ver o resultado esperado exibido no console agora, que é 5 (cinco).

Pode utilizar o depurador incorporado no Node.js para aprender os princípios básicos da depuração e para sessões rápidas de depuração. Pode ser incômodo inserir os comandos e pode ser muito limitado e difícil de usar com programas complexos.

Veremos nas próximas secções como utilizar o depurador do Visual Studio Code em alternativa.