Como depurar aplicativos Node.js no Visual Studio Code

Depurar seu aplicativo Node.js no próprio Visual Studio Code é possível e direto. O editor do VS Code vem com um depurador integrado capaz de depurar qualquer aplicativo direcionado ao tempo de execução do Node.js. Isso significa que você pode depurar JavaScript ou qualquer outra linguagem que compila para ele (por exemplo, TypeScript).

Este artigo o guiará pelas etapas para depurar seu aplicativo Node.js no VS Code. Você aprenderá como iniciar uma sessão de depuração, inserir pontos de interrupção, anexar um processo externo e depurar código TypeScript usando mapas de origem.

O que você precisa para começar

Antes de começar, instale Node.js e VS Code em sua máquina local. A versão mais recente do Node.js está disponível no Node.js website oficial. Da mesma forma, para o Visual Studio Code, baixe a versão mais recente do Código VS

local na rede Internet. Para obter instruções sobre como configurar o VS Code no Windows, leia nosso guia de configuração.

Você também precisa de um projeto Node.js. Você pode criar um aplicativo Node.js simples do zero ou usar um aplicativo existente.

O processo de depuração no código VS

Iniciar uma sessão de depuração no editor do VS Code é bastante simples. Abra o arquivo com o VS Code e clique no botão Executar e depurar ícone na barra lateral (ou pressione Ctrl + Shift + D no seu teclado). A seguir, clique no Executar e depurar botão para iniciar o processo.

Por padrão, o Node.js tentará descobrir o ambiente de depuração do seu projeto. Mas se a detecção automática não for bem-sucedida, ela solicitará que você selecione o ambiente certo. Para este tutorial, esse ambiente é o Node.js.

Depois de selecionar o ambiente, o VS Code ativa o depurador e o anexa ao processo. Você pode ver sua saída no CONSOLE DE DEBUG. Usando a barra de ferramentas de depuração na parte superior, você pode iterar no código, pausar a execução ou encerrar a sessão.

Você também tem a opção de criar um arquivo de configuração. O launch.json arquivo permite que você configure e configure os detalhes de depuração. Se o seu script exigir um argumento, forneça esses argumentos no launch.json arquivo. Várias opções podem ser definidas em cada configuração:

{ 
"versão": "0.2.0", 
"configurações": [ 
 { "tipo": "nó", 
"solicitar": "lançar", 
"nome": "Programa de Lançamento", 
"pular arquivos": [ "/**" ], 
"programa": "${workspaceFolder}\\index.js"
 } 
 ]
}

Você também notará cinco painéis no lado esquerdo do editor. Esses painéis são VARIÁVEIS, ASSISTIR, PILHA DE CHAMADAS, SCRIPTS CARREGADOS, e PONTOS DE INTERRUPÇÃO:

Quando terminar de definir a configuração, selecione e execute o programa através do menu de configuração.

Anexar um Processo Externo

Outro método para configurar uma sessão de depuração do Node.js é anexar um processo externo. Inicie o programa com o seguinte comando:

node --inspect index.js

Insira o -brk bandeira depois --inspecionar se você quiser anexá-lo antes que o programa comece a ser executado.

Em seguida, abra o seletor de processos no VS Code. Isso lista todos os processos disponíveis no ambiente Node.js. Para abrir o seletor, pressione Ctrl + Deslocamento + P e encontre o Depurar: anexar ao comando Node.js.

Clique no comando e selecione a opção correta para iniciar o processo de depuração.

Criando um ponto de interrupção

Se você quiser fazer uma pausa em pontos específicos do seu programa para inspecionar o código, defina pontos de interrupção lá. Você pode definir pontos de interrupção em quase qualquer lugar do seu código. Isso inclui declarações de variáveis, expressões e comentários. Mas você não pode definir pontos de interrupção nas declarações de função.

Criar um ponto de interrupção é bastante simples. À medida que você move o mouse para o lado esquerdo dos números das linhas, um círculo vermelho aparece em cada linha. Identifique o número da linha em seu código onde deseja inserir o ponto de interrupção. Em seguida, clique nessa linha para adicionar o ponto de interrupção:

No PONTOS DE INTERRUPÇÃO painel, você encontrará todos os pontos de interrupção ativados em seu projeto. É aqui que você gerenciará, editará e desativará os pontos de interrupção. Você também pode interromper o código quando uma exceção é lançada ou em casos de exceções não detectadas. Isso permite que você inspecione o problema antes que o processo seja encerrado.

Vamos ver os pontos de interrupção em ação. Clique no Lançar ícone para iniciar a sessão de depuração. O programa fará uma pausa no primeiro ponto de interrupção e produzirá o valor para inspeção:

Você pode clicar no Continuar ícone (ou pressione F5) para mover o programa para o próximo ponto de interrupção. Isso continuará até você chegar ao final do programa.

Depurando TypeScript com mapas de origem

À medida que o Typescript continua a se popularizar, a quantidade de projetos Node.js escritos em TypeScript tende a aumentar. Felizmente, você também pode depurar projetos baseados em TypeScript com o VS Code.

Primeiro, crie um tsconfig.json arquivo no diretório raiz do seu projeto (se ainda não estiver criado) e habilite os mapas de origem:

{ "opções do compilador": { "mapas de origem": verdadeiro }}

Em seguida, anexe o processo em execução e defina os pontos de interrupção em seu arquivo TypeScript. O Visual Studio Code encontrará os mapas de origem e os usará.

Você pode dizer explicitamente ao VS Code onde encontrar os mapas de origem. Para fazer isso, adicione um outArquivos atributo em seu arquivo de configuração de inicialização e aponte-o para a localização exata de seus mapas de origem:

{ 
"versão": "0.2.0", 
"configurações": [ { 
"tipo": "nó", 
"solicitar": "lançar", 
"nome": "Programa de Lançamento", 
"pular arquivos": [ "/**" ], 
"programa": "${workspaceFolder}\\index.js", 
"outFiles": "${workspaceFolder}\\index.js", 
 } 
 ]
}

Se você estiver usando nó ts para executar seu projeto sem uma etapa de compilação, use isso em vez da configuração acima:

{ 
"versão": "0.2.0", 
"configurações": [ { 
"tipo": "pwa-node", 
"solicitar": "lançar", 
"nome": "Iniciar servidor", 
"pular arquivos": [ "/**" ], 
"runtimeArgs": [ "-r", "ts-node/register" ], 
"arg": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Como não há nenhum atributo de programa, o tempo de execução argumentos registros nó ts como o manipulador de arquivos TypeScript. O primeiro argumento para argumentos é o arquivo de entrada para o programa. Agora você pode iniciar sua sessão de depuração. Se estiver desenvolvendo com JavaScript vanilla ou um framework front-end, você também pode depure o código JavaScript no navegador.

Outros recursos no código do Visual Studio

O Visual Studio Code é um poderoso editor de código-fonte repleto de recursos incríveis. Cobrimos a ferramenta de depuração integrada do VS Code. Também demonstramos como você pode usá-lo para depurar seu aplicativo Node.js.

Mas há muitos outros recursos úteis no VS Code. Embora você possa estar familiarizado com alguns deles, alguns podem ser completamente novos para você. Nesse caso, pode ser do seu interesse aprender sobre esses recursos e como usá-los.