Debugando projetos NodeJS no VSCode
![Debugando projetos NodeJS no VSCode](https://www.alura.com.br/artigos/assets/uploads/2019/04/image6.png)
Eu trabalho bastante com Node em diversos projetos no meu dia a dia, e me lembro que no começo eu sofria bastante por não saber como debugar meu código. Afinal, existem inúmeras formas de se fazer isso e eu gostaria de compartilhar com vocês a que eu mais gosto - usando o VSCode
Pré-requisitos
Fica tranquilo que para esse post você não precisa ser um ninja master em Node.JS. Com uma base de JavaScript e interesse em Node já vai conseguir pegar a ideia :).
![Banner promocional da Alura, com um design futurista em tons de azul, apresentando o texto](assets/guia-de-carreira-front-end-alura/guia-de-carreira-front-end-alura-banner-corpo-mobile.png)
Mão na massa
Para não perder muito tempo, eu já tenho um projeto previamente criado com Express que possui o seguinte código:
const express = require('express')
const app = express()
app.get('/', (req,res) => {
const dadoExterno = req.query.dadoExterno
const valorDoResponse = `Você me enviou: ${dadoExterno}`
res.send(valorDoResponse)
})
const port = 3000
app.listen(port, () => {
console.log(`
Servidor subiu com sucessinhos!
htttp://localhost:${port}
`)
})
No package.json
, eu deixei criado nos scripts um comando dev
para rodar o servidor em modo de desenvolvimento
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon ./server.js"
},
Caso você não conheça o nodemon, ele é uma ferramenta que encerra e inicia um processo node, facilitando o reload para testarmos alterações feitas no código do nosso servidor.
Encontrando o problema
Repare que ao acessarmos nosso projeto no navegador, a resposta nos retorna um undefined
. Isso acontece pelo fato de que não informamos a variável na query string dadoExterno
.
![image alt text](https://www.alura.com.br/artigos/assets/uploads/2019/04/image6.png)
Em um código pequeno e isolado é mais fácil encontrar erros e códigos que retornam algo inesperado, mas em um projeto com várias camadas entre os arquivos é difícil encontrar algo facilmente.
Em casos assim a primeira coisa que eu faria seria fazer um console.log()
em dadoExterno
para entender o que está acontecendo:
![image alt text](https://www.alura.com.br/artigos/assets/uploads/2019/04/image7.png)
Agora voltando para o caso de códigos mais complexos, eu prefiro ter alguma ferramenta que me ajude a debugar, algo próximo do que eu tive quando trabalhei com C# ou Java no IntelliJ e no Visual Studio.
VsCode ao Resgate
No VsCode, se alguma vez você chegou a clicar errado em uma linha, provavelmente viu essa bolinha vermelha aparecendo
![image alt text](https://www.alura.com.br/artigos/assets/uploads/2019/04/image8.png)
Isso é um breakpoint, seria o equivalente a escrevermos a palavra debugger
no meio do código. O legal é que é possível integrar esse breakpoint com o reload do nosso servidor.
O Node/Nodemon, possui uma flag que podemos passar para ativar um modo de inspeção (inspect) em nossos projetos. Em linha gerais é aberto um socket que diversas ferramentas podem se inscrever e nos permitir o debug
![image alt text](https://www.alura.com.br/artigos/assets/uploads/2019/04/image9.png)
É possível debugar projetos até mesmo através do console do Chrome após passar essa flag:
![image alt text](https://www.alura.com.br/artigos/assets/uploads/2019/04/image2.png)
Visualizando a URL chrome://inspect/#devices
Como o foco desse post é o VsCode, podemos seguir. Para continuarmos nossa integração, dentro do editor na barra de opções, onde vemos nossos arquivos abertos, clique na opção Debug
e depois em Add Configuration...
![image alt text](https://www.alura.com.br/artigos/assets/uploads/2019/04/image10.png)
Ao clicarmos neste botão, irá abrir um arquivo com configurações que podemos adicionar em nosso projeto do VsCode
![image alt text](https://www.alura.com.br/artigos/assets/uploads/2019/04/image1.png)
Dentro do array de configurações, iremos adicionar um objeto que irá se atrelar ao nosso processo do node ou do nodemon e assim mapear os breakpoints do nosso código:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach by Process ID",
"processId": "${command:PickProcess}",
"protocol": "inspector",
"restart": true
},
]
}
Com isso, ao clicarmos no botão de play na aba de debug, podemos ver o VsCode nos perguntando qual processo queremos monitorar:
![image alt text](https://www.alura.com.br/artigos/assets/uploads/2019/04/image4.png)
Aqui vamos escolher o nodemon
É importante ressaltar que você precisa ter rodado o comando
nodemon --inspect ./arquivo.js
. Sem a flag do inspect nada irá acontecer aqui.
E após isso, podemos ver que o VsCode ficou com a barra de baixo laranja e apareceu uma mensagem "Debugger attached" no console
![image alt text](https://www.alura.com.br/artigos/assets/uploads/2019/04/image5.png)
É importante lembrar que devemos ter rodado anteriormente o comando
npm run dev
com o nodemon --inspect
Agora é possível adicionarmos breakpoints em nosso projeto e acompanharmos o debug:
![image alt text](https://www.alura.com.br/artigos/assets/uploads/2019/04/image3.png)
- Na lateral esquerda podemos ver que as variáveis locais, de escopo e tudo o mais são agora facilmente visualizadas dentro do editor
- Podemos ir passando linha a linha pelo debug
- No Debug Console agora é possível acessarmos as variáveis disponíveis no momento e aplicarmos transformações em cima delas. Isso nos ajuda a criarmos algum trecho de código e isolarmos em uma função
- E a melhor parte é que estamos debugando de uma forma não intrusiva, ou seja, não corremos risco de mandar um console.log ou um debugger em um de nossos commits :)
- Para desligar tudo é só clicar no botão vermelho ao lado da setinha arredondada na lateral superior direita
Espero que tenha gostado do post, em breve trarei mais dicas, se curtiu e quiser saber em primeira mão quando vierem novos conteúdos, me segue no meu twitter e pra acompanhar meus outros posts ta tudo centralizado em meu site pessoal https://mariosouto.com até mais \o
Se gostou do artigo, que tal dar uma olhada na nossa formação de engenheiro front-end na Alura e aprender mais um pouco sobre essa gigantesca área?