Incrivelmente reparei hoje que não tenho um tutorial sobre isso aqui no blog e quando mais um aluno de meus cursos me pediu uma dica de como fazer depuração de aplicações Node.js e ReactJS no Visual Studio Code, eu resolvi tomar vergonha na cara e criar um rápido passo a passo.
Veremos neste tutorial:
Vamos lá!
Atenção: este não é um tutorial para aprender a programar em Node.js ou ReactJS, para isso tem diversos outros tutoriais aqui no blog como esses para Node e esses para React.
#1 – Debug de Node.js no VS Code
Para este exemplo, você precisará ter o Node.js instalado e o VS Code. Você pode acompanhar pelo vídeo abaixo, se preferir.
Agora, você deve ter um projeto Node.js na sua máquina. Aqui em meu exemplo, eu vou criar um usando o meu velho amigo express-generator (na verdade vamos usar o meu fork desse projeto, que está mais atualizado).
A lista de comandos para instalar o express-generator, criar uma aplicação express, instalar as dependências e colocar ela para rodar estão abaixo.
|
1 2 3 4 5 6 7 |
npm install -g https://github.com/luiztools/express-generator.git express debug-nodejs cd debug-nodejs npm install npm start |
Abra seu navegador e acesse localhost:3000 para ver se está tudo funcionando.
Agora que você tem uma aplicação Node.js rodando, abra ela no VS Code e procure pelo arquivo /routes/index.js, clicando à esquerda da linha 6, para adicionar um breakpoint (ponto de parada, a bolinha vermelha) que será usado para testar se o debug está funcionando.
Agora, vá na toolbar esquerda e selecione a aba Debug (a com o inseto). Você terá algumas opções, clique no link “create a launch.json file”, selecionando qualquer opção na sequência pois vamos reescrever a configuração. Abaixo, a configuração que recomendo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "version": "0.2.0", "configurations": [ { "name": "Attach Node.js", "processId": "${command:PickProcess}", "request": "attach", "skipFiles": [ "<node_internals>/**" ], "type": "pwa-node" } ] } |
Com esta configuração, se você estiver com uma aplicação Node.js rodando, basta ir no VS Code e apertar F5 que ele vai te listar os processos do Node que estão em execução e aí você escolhe o que vai depurar.
Agora, quando você interagir com a aplicação e ele chegar no ponto do breakpoint, o fluxo vai ser interrompido e você poderá avançar passo a passo, inspecionar variáveis e etc, no VS Code, fazendo a dita cuja depuração como mostra na imagem abaixo. Dê uma brincada na toolbar de debug que ele abre ali no topo, para entender como tudo funciona.
#2 – Debug de ReactJS no VS Code
Para este exemplo, você precisará ter o Node.js instalado, o VS Code e o Google Chrome. Se preferir, o vídeo abaixo tem o mesmo conteúdo.
Agora, você deve ter um projeto ReactJS na sua máquina. Aqui em meu exemplo, eu vou criar um usando o toolkit Vite.
A lista de comandos para criar e colocá-lo para rodar está abaixo (durante a configuração, siga com os opções padrões para ReactJS com JavaScript).
|
1 2 3 4 5 |
npm create vite@latest debug-reactjs cd debug-reactjs npm run dev |
O navegador vai se abrir em localhost:5173 para você ver se está tudo funcionando.
Agora que você tem uma aplicação ReactJS rodando, abra a sua aplicação ReactJS no VS Code e procure pelo arquivo App.jsx, clicando à esquerda de alguma linha com código JavaScript (ex: 7), para adicionar um breakpoint (ponto de parada, a bolinha vermelha) que será usado para testar se o debug está funcionando.
Agora, vá na toolbar esquerda e selecione a aba Debug (a com o inseto). Você terá algumas opções, clique no link “create a launch.json file”, selecionando a opção Chrome na sequência. Certifique-se de que a porta da sua aplicação esteja correta.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "version": "0.2.0", "configurations": [ { "name": "Debug Vite + React (Chrome)", "type": "chrome", "request": "launch", "url": "http://localhost:5173", "webRoot": "${workspaceFolder}/src", "sourceMaps": true, "trace": true } ] } |
Com esta configuração, se você estiver com uma aplicação ReactJS rodando em um terminal, basta ir no VS Code e apertar F5 que ele vai abrir uma janela do Google Chrome e iniciar a depuração. Como colocamos nosso breakpoint logo na página inicial, ele vai chegar no ponto do breakpoint, o fluxo vai ser interrompido e você poderá avançar passo a passo, inspecionar variáveis e etc, no VS Code, fazendo a dita cuja depuração como mostra na imagem abaixo. Dê uma brincada na toolbar de debug que ele abre ali no topo, para entender como tudo funciona (imagem abaixo meramente ilustrativa).
#3 – Configuração para Monorepo
E por fim, se você tem um monorepo, com um projeto ReactJS e outro Node.js, você deve ter um único launch.json dentro de uma pasta .vscode na raiz do seu projeto, com o conteúdo de ambas configurações, como abaixo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "version": "0.2.0", "configurations": [ { "name": "Attach Node.js", "processId": "${command:PickProcess}", "request": "attach", "skipFiles": [ "<node_internals>/**" ], "type": "pwa-node" }, { "name": "Launch Chrome against localhost", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/frontend/src", "sourceMaps": true, "trace": true } ] } |
E então, quando for rodar o debug, você deve escolher se vai rodar a configuração 1 (Attach Node.js) ou a configuração 2 (Launch Chrome), como mostra a imagem abaixo.
Até onde entendi, não é possível startar os dois debugs ao mesmo tempo.
Outras opções mais avançadas incluem parâmetros na inicialização e até mesmo disparar um processo Node.js ao invés e “attachar”, veja abaixo exemplo de um projeto meu real, onde tenho um monorepo com pastas backend e frontend e uma configuração para carregar .env na inicialização.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Depurar Backend (com dotenv)", "runtimeArgs": ["-r", "dotenv/config"], "program": "${workspaceFolder}/backend/src/server.js", "envFile": "${workspaceFolder}/backend/.env", "cwd": "${workspaceFolder}/backend", "skipFiles": ["<node_internals>/**"], "console": "integratedTerminal" } ] } |
Espero ter ajudado!
Olá, tudo bem?
O que você achou deste conteúdo? Conte nos comentários.
Muito bom. Mas gostaria de saber mais (caso seja possível da sua parte) o envio de algo sobre “Base de Dados”. Sou iniciante no Visual Studio. Obrigado.
Na seção Meus Livros aqui do blog tem um ebook gratuito chamado MySQL para Iniciantes, recomendo começar por ele.