Como debugar sua aplicação Nodejs no VS Code (Guia completo)

Programador(a), neste Guia completo você vai aprender como debugar seu projeto NodeJs no VSCode de forma profissional e sem sofrimento.
Então vem com a gente para largar de vez o console.log e evoluir de verdade o/

 

Introdução

Softwares são sistemas complexos e devido a quantidade de linhas ou instruções presentes neles, torna-se uma tarefa altamente importante adotar uma estratégia para encontrar e corrigir problemas. Para isso utilizamos um processo de análise chamado depuração (em inglês: debugging).

No Nodejs, muitos programadores utilizam o console.log() para realizar este processo e assim analisar alguns trechos de código, porém, essa estratégia não é muito eficiente.

A seguir você irá conhecer uma forma muito poderosa para debugar seu código Javascript com o editor de texto VSCode tornando mais fácil seu dia a dia de programação!

 

Ferramentas

  • Nodejs
    Ambiente de execução Javascript server-side.
  • Yarn ou Npm
    Gerenciador de pacotes Javascript.
  • VSCode
    Editor de código fonte.

 

Depurando sua aplicação

Nos próximos passos você  aprenderá a debugar suas aplicações Nodejs com auxílio de um editor de código fonte chamado Visual Studio Code, o qual é uma ferramenta que já foi construída com suporte a depuração Nodejs e que aceita códigos que utilizam Javascript, Typescript e diversas outras linguagens transpiladas para Javascript.

 

Criação do projeto

 

1- Crie a pasta do seu projeto executando:

 

2-  Entre na pasta criada.

 

3- Crie o arquivo package.json com o gerenciador de pacotes Yarn.

 

4- Instale o framework web Express, que será responsável por providenciar uma série de funcionalidades robustas.

 

5- Toda vez que um arquivo de uma aplicação Nodejs é alterado, seu server precisa ser reiniciado.
Para evitar este processo repetitivo e chato, instale o pacote Nodemon em ambiente de desenvolvimento, que será capaz de detectar qualquer mudança no projeto e reiniciar o servidor automaticamente.

 

6- Abra seu projeto no VSCode.

 

 

Configurações iniciais

1- Crie um novo arquivo chamado app.js

 

2- Dentro do arquivo criado anteriormente adicione o seguinte código

Acima você iniciou as configurações básicas do projeto, com um endpoint que retorna saudações do OneBitCode.

 

3- Suba o seu projeto com o seguinte comando

 

4- Abra o navegador e tente acessar o seguinte link para verificar que tudo está funcionando perfeitamente

http://localhost:3000/

 

5- Pare a execução do seu servidor

 

 

Configuração do Depurador

A seguir você dará os primeiros passos na depuração com VSCode, faremos a configuração do depurador para realizar seu primeiro Debug no próximo passo.

 

1- Na Activity Bar, localizada na parte esquerda do VSCode, clique no ícone de Inseto (Bug) para ir até as configurações de debug.

 

2- Note que o Editor percebe que você não tem nenhum arquivo de depuração configurado para o projeto atual e  apresenta um link para que você faça isso.

 

3- Clique no link para criar o arquivo launch.json e em seguida selecione a opção Node.js

 

4- Explicando o arquivo launch.json

Neste arquivo você tem um conjunto de configurações:

  • type – O tipo de Debug utilizado na sua configuração.
  • request – O modo de Debug que você está utilizando.
  • name – Um nome amigável para a identificação dessa configuração.
  • skipFiles – Arquivos que você não deseja depurar.
  • program – O arquivo que executará sua aplicação.

 

5- No arquivo launch.json, altere o valor da chave "program" para informar que o arquivo utilizado para execução do projeto será o app.js.

 

6- Ainda no arquivo launch.json, dentro de  "configurations" insira as seguintes chave/valor

  • runtimeExecutable – Caminho para a ferramenta de execução que você irá utilizar (o node será utilizado por padrão caso essa chave não seja definida).
  • restart – Sempre que o nodemon reiniciar o servidor o depurador também será reiniciado.

 

7- Clique novamente no ícone de Debug e perceba que agora vemos novas informações nessa tela.

 

8- Inicie o projeto no modo de Debug clicando no local apresentado na imagem acima (Start Debugging).

 

9- Agora abra o Debug Console (Ctrl+Shift+Y), onde será possível acompanhar os logs da sua aplicação e também realizar ensaios através de execução de códigos.

 

10- Perceba que sua aplicação foi iniciada e que o debug está funcionando pelos logs do Debug.

 

 

Depurando

Para depurar um projeto é preciso criar breakpoints que pausarão a execução do programa em um determinado ponto do código tornando possível a sua análise. É possível criar esses breakpoints clicando na margem de uma linha ou então apertando F9 na linha que está em curso.

 

1- Crie um breakpoint na linha 10 do arquivo app.js.

 

2- Tente acessar a rota local e perceba que a execução será interrompida no ponto em que você definiu.

Sua aplicação sempre irá realizar esta pausa quando chegar a um breakpoint. Então, se você adiciona um breakpoint dentro de um loop que se repete 100 vezes, essa pausa acontecerá as 100 vezes.

http://localhost:3000/

 

3- Com a execução interrompida note que podemos realizar uma inspeção de dados nas informações fornecidas pelo depurador.

Abaixo veja as variáveis disponíveis para análise considerando o local atual do breakpoint.

 

4- Caso você posicione o mouse sobre uma variável no código do projeto será possível visualizar seu valor atual.

 

5- Note que também é possível acessar e realizar ensaios com estes valores através do Debug Console

 

6-  Clique no ícone de Continue presente no Debug Actions para continuar a execução do programa. O Debug Actions é uma ferramenta muito importante, pois é utilizada para controlar o debug.

 

7- Entenda o Debug Actions.

  • Continue / Pause F5
    Realiza a pausa da execução de forma manual ou então continua a execução.
  • Step Over F10
    Avança um passo, ou seja, executa a linha em curso e então pausa na próxima linha.
  • Step Into F11
    Possui grande similaridade com o Step Over, se diferindo apenas quando a linha em curso possui a execução de uma função como instrução. Neste caso, ele irá até a função e pausará em sua primeira linha de execução;
  • Step Out Shift+F11
    Executa toda a função do processo iniciado pelo Step Into e pausará na próxima instrução.
  • Restart Ctrl+Shift+F5
    Reinicia o depurador
  • Stop Shift+F5
    Pausa o depurador

 

 

Adicionando um Logpoint

Já aconteceu de você esquecer um console.log() em seu código?

Com o depurador do VSCode, você poderá se beneficiar do Logpoint para não precisar ficar escrevendo e apagando console.log(). Ele não pausa a execução da sua aplicação, porém, exibe um log personalizado dentro do Debug Console.

 

1-  Remova o breakpoint da linha 10 do arquivo app.js clicando na margem da linha ou então posicionando o cursor na linha e pressionando F9

 

2- Ainda na linha 10, posicione o mouse na margem e clique com o botão direito do mouse. Depois selecione a opção Add Logpoint e insira a seguinte mensagem:
Hello value: {hello}

É possível ver acima que expressões Javascripts podem ser incluídas no Logpoint através do símbolo {}

 

3- Perceba que ao acessar a rota local agora, o Logpoint que você definiu anteriormente aparecerá no Debug Console

http://localhost:3000/

 

 

Expression Condition

Como dito anteriormente, adicionando um breakpoint dentro de um laço de repetição a aplicação irá ser pausada pelo depurador em cada iteração deste laço.

Isso pode se tornar um grande problema e a fim de evitar isso você pode utilizar uma Expression Condition onde você define condições para que o depurador pause a execução e seja possível analisar um contexto específico.

 

1- Substitua o endpoint criado no arquivo app.js pelo código que vem a seguir

No código acima você criou um novo Array a partir de um Array existente multiplicando cada elemento do array existente por 3.

 

2- Pense em um caso onde você deseja pausar a execução enquanto percorre o array values, porém, somente quando o valor do elemento percorrido seja igual a 6 para saber qual será o resultado neste caso.

Para isso, clique com o botão direito na margem da linha 9 e depois selecione a opção Add Conditional Breakpoint. Por fim, insira a condição ({num == 6}) e veja a mágica acontecendo.

 

Acesse a rota do endpoint pelo navegador e veja que o depurador irá parar quando a condição que você informou for satisfeita, sendo assim você saberá qual será o valor retornado quando a repetição passar pelo o elemento 6 do array existente.

http://localhost:3000/

 

 

Conclusão

Através desse artigo foi possível demonstrar as principais características do depurador do VSCode em aplicações Nodejs.

Nele você criou um projeto com o web framework Express, realizou configurações para depuração com o VSCode e conheceu diferentes estratégias para depurar o seu projeto.

Caso você ainda não utilize nenhuma ferramenta de depuração, ou então, utilize uma ferramenta menos poderosa, espero que os benefícios demonstrados nesta publicação tenham te incentivado a utilizar o VSCode e que a experiência dessa utilização te traga uma vida livre de bugs misteriosos, mais tranquila e feliz.

Utilize os comentários para compartilhar conosco se você aprendeu algo novo por meio desta publicação nos mantendo motivados a sempre trazer novos conteúdos que impactam a vida das pessoas!

 

 

5 1 vote
Article Rating
outubro 2, 2020
Subscribe
Notify of
guest
1 Comentário
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Alisson Suassuna
19 dias atrás

Parabéns pelo artigo, está muito legal

Feito com s2 por OneBitCode
1
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: