Como debuggar o NodeJS no Visual Studio Code

rafaelvieirab

rafaelvieirab

Posted on May 20, 2021

Como debuggar o NodeJS no Visual Studio Code

Incontáveis vezes ocorrem erros inesperados, e precisamos analisar o fluxo da nossa aplicação. Uma forma bem mais eficiente que os famosos "console.log('Até aqui deu certo')", é depurando a aplicação.

Abrindo a Ferramenta de Debugger

Primeiramente acesse a perspectiva de Debug, clicando no menu lateral esquerdo de Debug (caracterizada pela formato de inseto). Depois, clicando em "Add Configurations", irá aparecer um arquivo .vscode/launch.json.

alt text

Porém, somente com esse arquivo criado, não conseguimos depurar a aplicação da forma que queremos.

Estratégias de Depuração

Existem duas maneiras de depurar no VSCode:

  1. "Launch": Inicia o servidor através da ferramenta de debugger.
  2. "Attach" : A ferramenta de depuração se conecta a um servidor já iniciado. Isto é, mantém a inicialização do servidor da mesma maneira que já acontecia, e ao clicar na opção de depurar (ícone de play) é que inicia a inspeção do código. Dessa forma, a ferramenta de depuração simplesmente se conecta ao servidor ativo, em vez de iniciar uma nova aplicação.

Nesse artigo, optaremos pela 2° estratégia.

Configurando aplicação

Inicialmente, adicione a flag --inspector na linha de comando que executa o servidor. Isso significa que desejamos inspecionar a execução com node, e permitindo que o "Attach" consiga se connectar a aplicação que possui --inspector.

  node --inspect server.js
Enter fullscreen mode Exit fullscreen mode

Se executarmos essa linha de código, perceberemos uma mudança nos logs da execução. Deve aparecer uma mensagem parecida com "Debugger lintening on ws://127.0.0.1:5000/id", onde id é um valor aleatório, e supondo que sua aplicação esteja executando no endereço 127.0.0.1:5000.

alt text

Isso significa que a aplicação está pronta ser inspecionada. Agora só falta o VSCode se conectar com esse degub.
Depois, alteramos as configurações no arquivo .vscode/launch.json da seguinte maneira:

"configurations": [
  {
    "type": "node",
    "name": "Attach Program",
    "request": "attach",
    "skipFiles": [
      "<node_internals>/**"
    ],
    "protocol": "inspector",
    "restart": false,
    "outFiles": []
  }
]
Enter fullscreen mode Exit fullscreen mode

Entendendo cada propriedade:

  • type: é especificada o type de debugger, no caso, é para o node;
  • name: é especificada o nome do debugger;
  • request: especifico qual é a forma de debugger. No caso attach é realizado uma conexão com o servidor que já se encontra em execução, enquanto launch inicia um novo servidor (primeira estratégia citada);
  • protocol: Ao configrar "protocol": "inspector", informa que utilizará o protocolo de inspeção do VSCode;
  • restart: realizar reconexão automática caso o servidor reinicie, isto é, caso a aplicação seja restartada, a ferramenta de depuração se conecta com a no instância;
  • outFiles: matriz de padrões glob para procurar em arquivos JavaScript.
  • skipFiles - pula automaticamente os arquivos cobertos por esses padrões glob.

Referências:

💖 💪 🙅 🚩
rafaelvieirab
rafaelvieirab

Posted on May 20, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related