Depurar com o Visual Studio Code
No exercício anterior, você aprendeu a importância de poder executar o seu código passo a passo com o depurador fornecido em Node.js. Para o seu trabalho no aplicativo Tailwind Traders, você precisará de um ambiente de depuração mais abrangente dentro de seu ambiente de desenvolvimento integrado (IDE).
Vamos descobrir como você pode configurar o depurador do Visual Studio Code para usá-lo com o Node.js.
Como usar o Visual Studio Code para depuração do Node.js
No Visual Studio Code, o depurador é acessado na guia Executar.
Se você tiver um arquivo
.jsaberto na janela do editor, poderá selecionar Executar e depurar e, em seguida, selecionar Node.js para depurar diretamente o arquivo JavaScript aberto.
Há várias outras maneiras de iniciar a depuração no Visual Studio Code. Para o próximo exercício, usaremos um arquivo launch.json. As equipes de desenvolvimento geralmente usam um arquivo launch.json para personalizar a configuração de execução. Com a configuração especificada em um arquivo .json, você pode fazer check-in no controle do código-fonte. No controle do código-fonte, você pode compartilhar a configuração em sua equipe.
Controlar o fluxo adicionando pontos de interrupção
Diferente do depurador de linha de comando interno do Node.js, o depurador do Visual Studio Code começa a executar o código imediatamente. Se o programa for encerrado rapidamente, talvez você não tenha a chance de interagir com o depurador. Por isso, talvez seja conveniente adicionar pontos de interrupção antes de executar o código. Adicionaremos e removeremos alguns pontos de interrupção no próximo exercício.
Para adicionar um ponto de interrupção ao código, localize a linha de código no arquivo JavaScript (.js) em que deseja adicionar uma quebra. Ao lado do número de linha da instrução de código, selecione na margem esquerda. Quando o ponto de interrupção for adicionado, você verá um círculo vermelho ao lado do número de linha. Para remover o ponto de interrupção, selecione o círculo vermelho.
Você também pode usar o menu de contexto com o botão direito do mouse para adicionar um ponto de interrupção. O menu de conteúdo inclui a opção Adicionar Ponto de Interrupção Condicional, em que você insere uma condição para interromper a execução do código. Um ponto de interrupção condicional só fica ativo quando a condição especificada é atendida.
Esse ponto de interrupção interrompe a execução somente quando o valor de convertedValue é indefinido.
Visão geral do depurador do Visual Studio Code
Após você configurar os pontos de interrupção e iniciar o aplicativo, novos painéis de informações e controles aparecerão na tela.
| Número | Nome | Descrição |
|---|---|---|
| 1. | Controles de inicialização do depurador | Na parte superior da barra lateral, você pode encontrar os controles de inicialização. |
| 2. | Estado das variáveis | O painel Variáveis mostra o estado atual de suas variáveis. |
| 3. | Estado das variáveis inspecionadas | O painel Inspeção mostra o estado atual das variáveis observadas. |
| 4. | Pilha de chamadas atual | O painel Pilha de chamadas mostra a pilha de chamadas atual. |
| 5. | Arquivos de script carregados | O painel Arquivos de script carregados mostra os arquivos JavaScript que foram carregados até agora. |
| 6. | Pontos de interrupção | O painel Pontos de interrupção mostra todos os pontos de interrupção que você colocou em seu código. |
| 7. | Controles de execução | É possível controlar o fluxo de execução do programa usando esses controles. |
| 8. | Etapa de execução atual | A etapa de execução atual é realçada na janela do editor. |
| 9. | Console de depuração | O Console de depuração pode ser usado para visualizar os logs do console do aplicativo e avaliar expressões ou executar código no contexto de execução atual. |
Controles de inicialização do depurador
Na parte superior da barra lateral, você encontra os controles de inicialização:
| Número | Nome | Descrição |
|---|---|---|
| 1. | Iniciar a depuração | Comece a depurar o seu aplicativo. |
| 2. | Selecione a configuração de inicialização ativa | Selecione a configuração de inicialização ativa. |
| 3. | Edite o arquivo launch.json |
Edite o arquivo launch.json. Crie o arquivo JSON se precisar. |
| 4. | Abrir o Console de depuração | Abra o Console de depuração e alterne a visibilidade dos painéis Variáveis, Inspeção, Pilha de chamadas e Pontos de interrupção. |
Exibir e editar o estado das variáveis
Ao analisar a causa de uma falha do programa, inspecione o estado das variáveis em busca de alterações inesperadas. Para fazer isso, você pode usar o painel Variáveis.
Suas variáveis são mostradas organizadas por escopo:
| Escopo | Descrição |
|---|---|
| Local | As variáveis locais são acessíveis no escopo atual, geralmente na função atual. |
| Global | As variáveis globais são acessíveis de qualquer lugar do programa. Objetos do sistema do runtime do JavaScript também estão incluídos, portanto, não se surpreenda se vir muitas coisas ali. |
| Fechamento | As variáveis de fechamento são acessíveis do fechamento atual, se houver. Um fechamento combina o escopo local de uma função com o escopo da função externa à qual ela pertence. |
As ações possíveis incluem:
Desdobrar escopos: É possível desdobrar escopos e variáveis selecionando a seta. Quando desdobra um objeto, você vê todas as propriedades definidas nele.
Alterar o valor da variável: É possível alterar o valor de uma variável de maneira dinâmica clicando duas vezes nela.
Espiar uma variável: Ao passar o mouse sobre um parâmetro de função ou uma variável diretamente na janela do editor, também é possível conferir o valor deles.
Inspecionar variáveis
Quando você quer acompanhar o estado de uma variável no decorrer do tempo ou em funções diferentes, pode ser maçante precisar pesquisá-la toda vez. Nesse caso, o painel Inspeção é bem útil.
Clique no botão mais para inserir o nome de uma variável ou uma expressão a ser inspecionada. Como alternativa, você pode clicar com o botão direito do mouse em uma variável no painel Variáveis e selecionar Adicionar para inspeção.
Todas as expressões dentro do painel Monitoramento serão atualizadas automaticamente à medida que o código for executado.
Pilha de chamadas
Toda vez que o programa entra em uma função, uma entrada é adicionada à pilha de chamadas. Quando o aplicativo se torna complexo e funções são chamadas dentro de outras funções repetidas vezes, a pilha de chamadas representa a trilha das chamadas de funções.
Ela é útil para localizar a origem de uma exceção. Se enfrentar uma falha inesperada no programa, muitas vezes você verá algo com esta aparência no console:
/Users/learn/nodejs/index.js:22
return value.toFixed(2);
^
TypeError: Cannot read property 'toFixed' of undefined
at formatValueForDisplay (/Users/learn/nodejs/index.js:22:16)
at printForeignValues (/Users/learn/nodejs/index.js:31:28)
at Object.<anonymous> (/Users/learn/nodejs/index.js:39:1)
at Module._compile (internal/modules/cjs/loader.js:956:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
at internal/main/run_main_module.js:17:11
O grupo de linhas at [...] abaixo da mensagem de erro é chamado de rastreamento de pilha. O rastreamento de pilha informa o nome e a origem de cada função chamada antes da exceção. No entanto, ele pode ser um pouco difícil de decifrar, pois também inclui funções internas do runtime do Node.js.
É aí que o painel Pilha de chamadas do Visual Studio Code é útil. Ele filtra informações indesejadas para mostrar a você apenas as funções relevantes do seu próprio código por padrão. Você pode então desenrolar essa pilha de chamadas para descobrir de onde a exceção foi originada.
Para ajudar ainda mais, é possível clicar no botão Reiniciar o quadro que aparece ao passar o cursor sobre um nome de função na pilha. Isso fará com que a execução retroceda para o início dessa função, reiniciando o programa até esse ponto.
Exibir arquivos de script carregados
Esse painel exibe todos os arquivos JavaScript carregados até agora. Em projetos grandes, às vezes pode ser útil verificar de qual arquivo o código atual está sendo executado.
Pontos de interrupção
No painel Pontos de interrupção, você pode ver todos os pontos de interrupção que colocou no código e alternar entre eles. Você também pode alternar entre as opções para interromper em exceções capturadas ou não capturadas. Use o painel Pontos de interrupção para examinar o estado do programa e rastrear a origem de uma exceção, se uma ocorrer, usando a Pilha de chamadas.
Controlar a execução
É possível controlar o fluxo de execução do programa usando esses controles.
Da esquerda para a direita, os controles são:
- Continuar ou pausar a execução. Se a execução for pausada, ela continuará até que o próximo ponto de interrupção seja atingido. Se o programa estiver em execução, o botão alternará para um botão pausar que você pode usar para pausar a execução.
- Contornar. Executa a próxima instrução de código no contexto atual (igual ao comando
nextno depurador interno). - Intervir. Semelhante a Contornar, mas se a próxima instrução for uma chamada de função, siga para a primeira instrução de código dessa função (a mesma que o comando
step). - Sair. Se você estiver dentro de uma função, execute o código restante dela e volte para a instrução após a chamada de função inicial (o mesmo que o comando
out). - Reiniciar. Reinicie o programa desde o início.
- Parar. Encerre a execução e saia do depurador.
Usar o console de depuração
Para exibir ou ocultar o console de depuração, pressione Ctrl+Shift+Y (Windows, Linux) ou Cmd+Shift+Y (Mac). Ele pode ser usado para visualizar os logs do console do aplicativo e para avaliar expressões ou executar código no conteúdo de execução atual, como o comando exec no depurador interno do Node.js.
É possível inserir uma expressão JavaScript no campo de entrada na parte inferior do console de depuração. Em seguida, pressione Enter para avaliá-la. O resultado é exibido diretamente no console.
Dessa forma, é possível verificar rapidamente um valor de variável, testar uma função com valores diferentes ou alterar o estado atual.
Adicionar logpoints em vez de console.log
Os linters sinalizarão instruções console.log como erros. Para obter o mesmo efeito que as instruções console.log, use os logpoints do Visual Studio Code, que são impressos no console de depuração.
Adicione um logpoint clicando com o botão direito do mouse na mesma área que você usou para adicionar um ponto de interrupção e, em seguida, selecione Adicionar logpoint. Insira uma mensagem a ser exibida nesse ponto no código.
Assim como os pontos de interrupção, os logpoints não alteram o código de nenhuma forma e só são usados durante a depuração. Você não tem mais desculpas para deixar aquele console.log('here') passar para a versão de produção.