Depurar com o Visual Studio Code
No exercício anterior, você aprendeu a importância de poder executar 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 do seu IDE (Integrated Development Environment).
Vamos descobrir como pode configurar o depurador do Visual Studio Code para o utilizar com o Node.js.
Como usar o Visual Studio Code for Node.js depuração
No Visual Studio Code, o depurador é acessado a partir da guia Executar .
Se você tiver um
.jsarquivo aberto na janela do editor, poderá selecionar Executar e Depurar e, em seguida, selecionar Nó.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 verificá-la no controle do código-fonte. A partir do controle do código-fonte, você pode compartilhar a configuração em toda a sua equipe.
Controle o fluxo adicionando pontos de interrupção
Ao contrário do depurador de linha de comando Node.js interno, o depurador de código do Visual Studio inicia imediatamente a execução do código. Se o seu programa terminar rapidamente, você pode não ter a chance de interagir com o depurador. É por isso que você pode querer adicionar pontos de interrupção antes de executar o código. Vamos adicionar e remover alguns pontos de interrupção no próximo exercício.
Para adicionar um ponto de interrupção em seu código, localize a linha de código em seu arquivo JavaScript (.js) onde você deseja adicionar uma quebra. Ao lado do número da 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 da linha. Para remover o ponto de interrupção, selecione o círculo vermelho.
Você também pode usar o menu de contexto do 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, onde 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.
Descrição geral do depurador do Visual Studio Code
Depois de configurar os pontos de interrupção e iniciar o aplicativo, novos painéis de informações e controles aparecem na tela.
| Número | Nome | Descrição |
|---|---|---|
| 1. | Controlos de início 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 das variáveis. |
| 3. | Estado das variáveis vistas | 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. | Ficheiros 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 colocados no código. |
| 7. | Controlos de execução | Pode controlar o fluxo da execução do seu programa com estes controlos. |
| 8. | Passo de execução atual | A etapa de execução atual é realçada na janela do editor. |
| 9. | Consola de depuração | O Debug Console pode ser usado para visualizar os logs do console do aplicativo e para avaliar expressões ou executar código no contexto de execução atual. |
Controlos de início do depurador
Na parte superior da barra lateral, pode ver os controlos de início:
| Número | Nome | Descrição |
|---|---|---|
| 1. | Iniciar depuração | Comece a depurar seu aplicativo. |
| 2. | Selecione a configuração de inicialização ativa | Selecionar a configuração de início ativa. |
| 3. | Editar o launch.json ficheiro |
Editar o ficheiro launch.json. Crie o arquivo json se precisar. |
| 4. | Abra o Console de Depuração | Abra o Console de Depuração e alterne a visibilidade dos painéis Variáveis, Observação, Pilha de chamadas e Pontos de interrupção. |
Ver e editar o estado das suas variáveis
Ao analisar a causa de um defeito do programa, um dos aspetos mais importantes é estar atento ao estado das suas variáveis para detetar alterações inesperadas. Pode utilizar o painel Variables (Variáveis) para tal.
As suas variáveis são apresentadas organizadas por âmbito:
| Scope | Description |
|---|---|
| Local | Local variables (Variáveis locais) são as acessíveis no âmbito atual, normalmente a função atual. |
| Global | Global variables (Variáveis globais) são as acessíveis a partir de qualquer local no seu programa. Também inclui os objetos do sistema do runtime JavaScript, por isso é natural que tenha muitos conteúdos. |
| Encerramento | Closure variables (Variáveis de fecho) são as acessíveis a partir do fecho atual, se existir. Um fecho combina o âmbito local de uma função com o âmbito da função externa a que pertence. |
As ações possíveis incluem:
Desdobrar escopos: Você pode desdobrar escopos e variáveis selecionando a seta. Ao desdobrar objetos, pode ver todas as propriedades definidas neste objeto.
Alterar o valor da variável: É possível alterar o valor de uma variável em tempo real clicando duas vezes na variável.
Espreitar uma variável: Ao passar o rato sobre um parâmetro de função ou uma variável diretamente na janela do editor, também pode espreitar o seu valor.
Ver variáveis
Se quiser controlar o estado de uma variável ao longo do tempo ou funções diferentes, pode tornar-se aborrecido estar sempre a procurar. É nestas situações que o painel Watch (Ver) é útil.
Pode selecionar o botão mais para introduzir o nome de uma variável ou uma expressão para ver. Como alternativa, você pode clicar com o botão direito do mouse em uma variável no painel Variáveis e selecionar Adicionar para observação.
Todas as expressões dentro do painel de observação serão atualizadas automaticamente à medida que o código for executado.
Pilha de chamadas
Sempre que o seu programa introduz uma função, é adicionada uma entrada à pilha de chamadas. Quando seu aplicativo se torna complexo e você tem funções chamadas dentro de funções muitas vezes, a pilha de chamadas representa a trilha de chamadas de funções.
É útil para localizar a origem de uma exceção. Muitas vezes, se tiver uma falha inesperada no seu programa, verá algo com este aspeto na consola:
/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 [...] por baixo da mensagem de erro é denominado rastreio de pilha. O rastreio de pilha indica o nome e origem de todas as funções chamadas antes de acabar com a exceção. No entanto, pode ser complicado de decifrar, uma vez que inclui funções internas do runtime Node.js.
É nesta situação que o painel Call stack (Pilha de chamadas) do Visual Studio Code é útil. Este filtra as informações indesejadas para mostrar apenas as funções relevantes do seu próprio código por predefinição. Em seguida, pode desenrolar esta pilha de chamadas para descobrir onde é que a exceção teve origem.
Para o ajudar ainda mais, pode selecionar o botão Restart frame (Reiniciar frame) que aparece ao pairar o cursor sobre o nome de uma função na pilha. Ele irá retroceder a execução de volta para o início dessa função, realmente reiniciando o programa até esse ponto.
Ver ficheiros de script carregados
Este painel apresenta todos os ficheiros JavaScript que foram carregados até agora. Em projetos grandes, por vezes pode ser útil verificar de que ficheiro é o código a ser executado atualmente.
Pontos de interrupção
No painel Breakpoints (Pontos de interrupção), pode ver e ativar/desativar todos os pontos de interrupção que colocou no seu código. Além disso, pode ativar/desativar opções para interromper em exceções identificadas e não identificadas. Você pode usar o painel Pontos de interrupção para examinar o estado do programa e rastrear a origem de uma exceção usando a pilha de chamadas quando ocorrer.
Controlar a execução
Pode controlar o fluxo da execução do seu programa com estes controlos.
Da esquerda para a direita, são estes os controlos:
- Continuar ou colocar em pausa a execução. Se a execução estiver em pausa, irá continuar até o próximo ponto de interrupção ser alcançado. Se o seu programa estiver em execução, o botão muda para um botão de pausa que pode utilizar para colocar a execução em pausa.
- Ignorar. Executa a instrução de código seguinte no contexto atual (como o comando
nextno depurador incorporado). - Avançar. Como Ignorar, mas se a instrução seguinte for uma chamada de função, avança para a primeira instrução de código nesta função (como o comando
step). - Saia. Se você estiver dentro de uma função, execute o código restante dessa função e volte para a instrução após a chamada de função inicial (igual ao
outcomando). - Reiniciar. Reinicie o seu programa a partir do início.
- Parar. Termine a execução e saia do depurador.
Utilizar a consola de depuração
O console de depuração pode ser mostrado ou oculto pressionando 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 exec comando no depurador Node.js interno.
Pode introduzir uma expressão JavaScript no campo de texto na parte inferior da consola de depuração. Em seguida, pressione Enter para avaliá-lo. O resultado é apresentado diretamente na consola.
Desta forma, pode verificar o valor de uma variável, testar uma função com valores diferentes ou alterar o estado atual rapidamente.
Adicione pontos de log em vez de console.log
Linters sinalizará console.log instruções como erros. Para obter o mesmo efeito console.log que as instruções, use pontos de log do Visual Studio Code, que são impressos no console de Depuração.
Adicione um ponto de registo clicando com o botão direito do rato na mesma área que utilizou para adicionar um ponto de interrupção e, em seguida, selecione Adicionar ponto de registo. Introduza uma mensagem para ser apresentada nesse ponto no seu código.
Como os pontos de interrupção, os pontos de log não alteram seu código de forma alguma e são usados apenas durante a depuração. Já não tem desculpa para deixar que esse console.log('here') esquecido passe para a produção.