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:
|
1 |
mkdir debug-project |
2- Entre na pasta criada.
|
1 |
cd debug-project |
3- Crie o arquivo package.json com o gerenciador de pacotes Yarn.
|
1 |
yarn init -y |
4- Instale o framework web Express, que será responsável por providenciar uma série de funcionalidades robustas.
|
1 |
yarn add express |
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.
|
1 |
yarn add nodemon --dev |
6- Abra seu projeto no VSCode.
|
1 |
code . |
Configurações iniciais
1- Crie um novo arquivo chamado app.js
2- Dentro do arquivo criado anteriormente adicione o seguinte código
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { let hello = { message: 'Hello from Onebitcode!', date: new Date().toLocaleDateString() } res.json(hello); }) app.listen(port, () => { console.log(`App listening at http://localhost:${port}`) }) |
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
|
1 |
nodemon app.js |
4- Abra o navegador e tente acessar o seguinte link para verificar que tudo está funcionando perfeitamente
5- Pare a execução do seu servidor
|
1 |
ctrl + c |
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.
|
1 |
"program": "${workspaceFolder}/app.js", |
6- Ainda no arquivo launch.json, dentro de "configurations" insira as seguintes chave/valor
|
1 2 |
"runtimeExecutable": "nodemon", "restart": true |
- 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 B 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.
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
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
|
1 2 3 4 5 6 7 8 |
app.get('/', (req, res) => { let values = [1, 3, 6, 9, 12]; let multipliedValues = values.map(function(num) { let multipliedValue = num * 3 return multipliedValue; }); res.json(multipliedValues); }) |
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.
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!
Parabéns pelo artigo, está muito legal