Como debuggar o NodeJS no Visual Studio Code
Tags: beginners, productivity, node
Published: 2021-05-20 11:55:46

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gv0d7ed4f5bp4ezx7guq.png)

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`.
```bash
  node --inspect server.js
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8ogv7mabdvs5e8c4jla.png)
 
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:
```json
"configurations": [
  {
    "type": "node",
    "name": "Attach Program",
    "request": "attach",
    "skipFiles": [
      "<node_internals>/**"
    ],
    "protocol": "inspector",
    "restart": false,
    "outFiles": []
  }
]
```
    
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:
- [Debug de aplicações Node.js com VSCode | Code/Drops #11 - Rocketseat](https://www.youtube.com/watch?v=bVAhNaxBEjM).