O editor de código do Visual Studio possui todas as ferramentas para depurar aplicativos Node.js com eficácia. Seu depurador integrado pode depurar qualquer aplicativo que vise o tempo de execução Node.js, mesmo se o código-fonte do aplicativo for uma linguagem que transpila para JavaScript, como TypeScript.
Ao iniciar uma sessão de depuração, você deve inspecionar a pilha de chamadas e todas as variáveis com escopo em seu estado atual. Você também pode avaliar expressões no editor e percorrer o código para detalhar as partes problemáticas.
Configurar um projeto para depuração do Node.js não é particularmente difícil, e este tutorial o ajudará a acertar na primeira tentativa!
Pré-requisitos
Antes de começar, certifique-se de que as versões mais recentes do Node.js e do Visual Studio Code estejam instaladas. Este tutorial usa v16.2.0 e 1.56.2, respectivamente.
Você também precisa de um projeto Node.js; você pode usar o seu próprio ou baixar este aplicativo de amostra de encurtador de URL . As instruções para configurá-lo estão no arquivo README do projeto.
Inicie uma sessão de depuração no Visual Studio Code
A maneira mais fácil de iniciar uma sessão de depuração no Visual Studio Code é abrir um arquivo no editor, clicar no ícone Executar Visualização na Barra de Atividade (ou pressionar Ctrl + Shift + D no teclado), seguido pelo botão Executar e Depurar no canto superior esquerdo do aplicativo.
O Visual Studio Code debugger tentará detectar automaticamente o ambiente de depuração para o seu projeto, mas se isso falhar, você será solicitado a selecionar o ambiente apropriado; neste caso, selecione Node.js .
A opção Node.js (legado) refere-se ao antigo depurador de JavaScript, que ainda está disponível, mas não é recomendado.
Depois de selecionar um ambiente, o projeto é iniciado e o depurador é anexado ao processo. Você pode ver a saída de seu projeto no DEBUG CONSOLE e a barra de ferramentas de depuração aparece na parte superior da tela para percorrer o código, pausar o script ou encerrar a sessão.
No lado esquerdo do editor, há cinco painéis intitulados VARIÁVEIS , ASSISTIR , PILHA DE CHAMADA , CARREGADO SCRIPTS e BREAKPOINTS .
Você também pode criar um arquivo de configuração de inicialização para o projeto para configurar e salvar detalhes de configuração de depuração que são infinitamente reutilizáveis por qualquer pessoa que trabalhe no projeto. Este arquivo de configuração é salvo como launch.json na pasta .vscode na raiz do projeto.
Crie o arquivo de configuração clicando no link criar um arquivo launch.json na visualização EXECUTAR E DEBUGAR: EXECUTAR .
Depois de selecionar o ambiente para seu projeto, o arquivo launch.json deve aparecer no editor com o seguinte conteúdo:
//.vscode/launch.json
{ "versão":"0.2.0", "configurações": [ { "type":"pwa-node", "request":"launch", "name":"Launch URL Shortener", "skipFiles": [ "/**" ], "program":"$ {workspaceFolder}/src/server.js" } ]
}
O nome da configuração é como será identificado no menu Configurações ; o programa que será executado é especificado no campo program .
Existem muitas opções que podem ser definidas em cada configuração, como os argumentos a serem passados para o programa, variáveis de ambiente e tarefas de pré-depuração. Leia a documentação para descobrir quais configurações são relevantes para o seu projeto.
Depois de terminar de definir a configuração do projeto, selecione e execute por meio do menu suspenso Configuração .
Anexe um processo Node.js externo
Outra opção para iniciar uma sessão de depuração é anexar a um processo Node.js externo. Inicie o programa com o seguinte comando:
$ node--inspect src/server.js
Ou, se quiser que o depurador seja anexado antes de o programa começar a ser executado, adicione:
$ node--inspect-brk src/server.js
Depois de executar qualquer um dos comandos acima, você pode abrir um seletor de processos no Visual Studio Code, que lista todos os processos disponíveis para o depurador Node.js. Para abrir o seletor de processos, digite Ctrl + Shift + P e encontre o comando Depurar: Anexar ao Processo de Nó :
Isso abre um menu que lista cada processo Node.js individual em execução em sua máquina. Pode haver várias entradas, mas deve ser fácil selecionar aquela em que você está interessado.
Selecione a entrada relevante para iniciar a sessão de depuração.
Criando um ponto de interrupção
Os pontos de interrupção permitem que você pause a execução do código em uma linha específica para inspecioná-la. Você pode criar pontos de interrupção no Visual Studio Code em quase qualquer lugar, exceto instruções de declaração de função. Você não está impedido de fazer isso em declarações de variáveis, expressões, comentários e linhas em branco.
Crie um ponto de interrupção clicando na medianiz à esquerda dos números das linhas no editor. Conforme você move o mouse pelos números, um círculo vermelho aparece em cada linha. Clicar no círculo vermelho em uma linha torna-o vermelho brilhante, indicando que um ponto de interrupção ativo está presente nessa linha.
Você pode repetir isso para todas as linhas de seu programa que sejam relevantes para o problema que você está tentando resolver.
Ao criar um ponto de interrupção no manipulador de uma rota, por exemplo, você pode acioná-lo executando essa parte do código fazendo uma solicitação para a rota usando o navegador ou ferramentas como Postman ou curl .
Isso faz com que o programa pare de executar e você pode inspecionar os valores de qualquer identificador de escopo atual no painel VARIÁVEIS passando o mouse sobre a linha do ponto de interrupção atual que está destacado em amarelo. Isso é semelhante ao depurador JavaScript em navegadores da web.
No painel BREAKPOINTS , todos os breakpoints que estão habilitados em seu projeto estão disponíveis. Você pode editar ou desativar qualquer ponto de interrupção a partir daí, o que é útil se você tiver vários pontos de interrupção em arquivos diferentes em seu aplicativo.
Você também pode interromper todas as exceções que ocorrem em seu aplicativo ou apenas exceções não detectadas. No último caso, isso significa que o depurador pausa antes de a mensagem de erro ser impressa e você pode inspecionar o que pode ter dado errado antes de encerrar o processo.
Uma variante dos pontos de interrupção útil para o fluxo de trabalho de depuração é o logpoint , que registra uma mensagem ou valor no console em vez de pausar a execução do código e invadir o depurador.
Pense nisso como uma instrução console.log () mais sofisticada que é fácil de adicionar e remover sem editar o próprio código. É representado por um ícone vermelho em forma de diamante no lugar do círculo vermelho.
Defina um logpoint clicando com o botão direito na sarjeta e selecionando Adicionar Logpoint . Isso abre um campo de entrada onde você pode registrar o texto no console. Se você quiser registrar o valor de uma expressão ou variável, coloque-o entre chaves.
Inspecionando valores
Vamos dar uma olhada em como você pode inspecionar valores em seu programa enquanto ele é executado. Os principais aspectos aos quais o editor presta atenção são os painéis VARIÁVEIS e ASSISTIR .
Painel VARIÁVEIS
O painel VARIÁVEIS é onde você pode inspecionar os valores das variáveis e expressões que foram avaliadas no ponto de interrupção. Se você abrir o menu de contexto clicando com o botão direito em qualquer um dos valores listados, você pode realizar algumas ações na variável:
- Definir valor permite que você modifique o valor da variável para testar certos valores enquanto o código está sendo executado
- Copiar valor copia o valor de uma variável para a área de transferência
- Copiar como expressão copia uma expressão para acessar a variável
- Adicionar para monitorar adiciona a variável ao painel ASSISTIR para monitoramento
Painel ASSISTIR
O principal benefício do painel ASSISTIR é que você pode facilmente exibir os valores que deseja monitorar enquanto o código está pausado.
Em vez de vasculhar uma propriedade profundamente aninhada no painel VARIÁVEIS sempre que quiser verificar seu valor, você pode adicioná-la ao painel ASSISTIR para fácil acesso. Isso é mais útil ao determinar os valores de várias variáveis de uma vez, pois eles são recalculados automaticamente na execução.
Rastreando o caminho de execução do código
A barra de ferramentas de depuração na parte superior do editor fornece vários comandos para navegar pelo depurador com eficiência. Quando você está tentando encontrar o caminho que o programa percorreu para chegar a uma linha ou função específica, esses recursos são inestimáveis.
Continue ( F8 )
Quando o programa é interrompido em um ponto de interrupção, você pode usar este botão para retomar a execução do código até o próximo ponto de interrupção, se houver.
Avançar ( F10 )
Este comando executa a linha atualmente destacada e faz uma pausa antes da próxima linha ser executada. Você pode executar o comando para mover uma função para baixo e entender totalmente que ela é executada no processo.
Se você usar este comando em uma linha que chama uma função, ele executa a função inteira e faz uma pausa na linha abaixo da chamada da função.
Entrar em ( F11 )
O comando Step Into funciona exatamente como Step Over, exceto quando atinge uma chamada de função, ele insere a função invocada e pausa na primeira linha. Esta é uma maneira útil de ir de um lugar para outro em sua base de código sem pular nenhum detalhe.
Sair ( Shift + F11 )
Este comando continua a execução e pausa na última linha da função atual. Isso pode ser usado se você acidentalmente inserir uma função que não seja relevante para o problema que está tentando resolver.
Este comando ajuda você a sair dessa função e voltar às partes relevantes rapidamente.
Reiniciar ( Ctrl + Shift + F5 )
Use isso para redefinir o depurador em vez de encerrá-lo e iniciá-lo novamente.
Parar ( Shift + F5 )
Quando terminar de depurar um programa, use este comando para sair da sessão de depuração. Se você se conectar a um processo Node.js externo, um ícone aparecerá para se desconectar do processo.
Depurando TypeScript com mapas de origem
Muitos projetos Node.js agora são escritos em TypeScript, que também pode ser depurado com Visual Studio Code.
Para começar, ative sourceMap em seu arquivo tsconfig.json :
{ "compilerOptions": { "sourceMap": verdadeiro }
}
Uma vez ativado, anexe ao processo em execução e defina pontos de interrupção em seu arquivo TypeScript. O Visual Studio Code pesquisa mapas de origem em todo o projeto, excluindo a pasta node_modules .
Você pode usar o atributo outFiles em seu arquivo de configuração de inicialização para especificar o local exato onde o Visual Studio Code deve procurar os mapas de origem; este deve ser o local da saída JavaScript:
{ "versão":"0.2.0", "configurações": [ { "type":"pwa-node", "request":"launch", "name":"Launch TypeScript", "skipFiles": [ "/**" ], "preLaunchTask":"compilar", "program":"$ {workspaceFolder}/src/server.ts", "outFiles": ["$ {workspaceFolder}/dist/**/*. js"] } ]
}
Se você estiver usando ts-node para executar seu projeto sem uma etapa de construção, o processo é mais simples. Em vez de usar a configuração launch.json acima, use o seguinte:
{ "versão":"0.2.0", "configurações": [ { "type":"pwa-node", "request":"launch", "name":"Launch Server", "skipFiles": [ "/**" ], "runtimeArgs": [ "-r", "ts-node/register" ], "args": [ "$ {workspaceFolder}/src/server.ts" ] } ]
}
Não há atributo program , então runtimeArgs registra ts-node como o manipulador para arquivos TypeScript e o primeiro argumento para args é o arquivo de entrada do programa. Assim que estiver configurado, você pode iniciar uma sessão de depuração!
Conclusão
Neste tutorial, abordamos muitos dos aspectos importantes da depuração de projetos Node.js no Visual Studio Code. Para obter mais informações sobre todos os recursos que o depurador oferece, consulte a documentação online .
Obrigado por ler e feliz depuração!
A postagem Como depurar Os aplicativos Node.js no Visual Studio Code apareceram primeiro no LogRocket Blog .
