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:
Se preferir, ao invés de ler o artigo você pode assistir ao vídeo abaixo, que possui o mesmo conteúdo.
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.
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.
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 |
npm install -g express-generator 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 |
{ "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.
Recomendo assistir a este vídeo também, onde não mostro essa etapa de configuração, mas o uso do debug mesmo.
#2 – Debug de ReactJS no VS Code
Para este exemplo, você precisará ter o Node.js instalado, o VS Code e o Google Chrome.
Agora, você deve ter um projeto ReactJS na sua máquina. Aqui em meu exemplo, eu vou criar um usando o meu velho amigo create-react-app.
A lista de comandos para criar e colocá-lo para rodar está abaixo.
|
1 2 3 |
npx create-react-app debug-reactjs cd debug-reactjs npm start |
O navegador vai se abrir em localhost:3000 para você ver se está tudo funcionando.
Agora que você tem uma aplicação ReactJS rodando, abra o VS Code e vá na aba de Extensões (aquela com os blocos de construção). Procure e instale a Debugger for Chrome.
Agora abra a sua aplicação ReactJS no VS Code e procure pelo arquivo /src/App.js, clicando à esquerda da linha 5, 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. Você precisará apenas mudar a porta na url da configuração, pois nossa aplicação ReactJS está rodando na porta 3000, lembra?
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } ] } |
Com esta configuração, se você estiver com uma aplicação ReactJS rodando, 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.
#3 – Configuração para Monorepo
E por fim, se você tem um monorepo, cum um projeto React.js 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 |
{ "version": "0.2.0", "configurations": [ { "name": "Attach Node.js", "processId": "${command:PickProcess}", "request": "attach", "skipFiles": [ "<node_internals>/**" ], "type": "pwa-node" }, { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } ] } |
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.
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.