Você ainda fica dando print nas variáveis para debugar o seu código? PARE JÁ com isso e aprenda a usar o depurador do Visual Studio Code para aumentar bastante a sua produtividade.
O que é isso?
Ferramenta de depuração é uma aliada enorme para diagnóstico de bugs em programas. Você pode estar executando o código passo-a-passo ou parando em pontos específicos para avaliar as variáveis do seu programa.
Legal! Como começo?
É necessário que você já tenha o Visual Studio Code instalado e configurado em sua máquina. Estarei mostrando um exemplo de depuração em Node.js mas você pode estar depurando programas em diferentes linguagens desde que o Visual Studio Code esteja configurado para a linguagem.
Vamos criar um projeto de teste!
Criei uma pasta chamada “Exemplo Depuracao” e executei “npm init” para inicializar o projeto.
Com o projeto inicializado, chegou a hora de criar um código de teste no arquivo “index.js” (ou o main que você escolheu)
function soma(a, b) {
return a + b;
}
let x = soma(10, 20);
Agora que já tenho o arquivo pronto para ser executado, vamos para a configuração do depurador. Para isso, você precisa criar o arquivo “launch.json” que contém as configuração para execução.
- Abra o menu de “Run”
- Clique em “create a launch.json file”
- No meu caso, o Visual Studio Code já criou um “launch.json” para um projeto padrão Node.js. As configurações desse arquivo dependerá da linguagem do programa a ser depurado, veja as configurações que se adequam ao seu caso.
Esse é o “launch.json” que estarei utilizando:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/index.js"
}
]
}Mãos à massa!
Sem mais delongas, vamos ao depurador de fato! Primeiramente será necessário criar pontos de parada de execução (breakpoint) do seu código. Se você colocar o cursor do mouse no número da linha, terá uma bolinha vermelha ao lado, basta clicar na bolinha vermelha para criar um breakpoint.
O breakpoint irá sinalizar ao depurador quando é para pausar a execução do código.
Criei um breakpoint na linha 2 e executei o depurador apertando F5. Repare que a execução parou na linha 2 e no menu esquerdo tem os valores das variáveis.
Controle de execução
Menu Flutuante
Há um menu flutuante com os botões para continuar execução, avançar para o próximo passo no escopo atual (não entra no método que está sendo executado na linha), avançar para o próximo passo real (entra no método que está sendo executado na linha), avançar para o próximo “return” existente, reiniciar execução e parar execução.
Breakpoints
É possível ativar/desativar breakpoints pelo menu lateral, além de criar breakpoint para todas as exceções lançadas e/ou exceções lançadas e não tratadas.
Monitoramento de execução
No menu lateral há as variáveis, expressões sendo monitoradas e pilha de chamadas.
Variáveis
Podemos ver e editar as variáveis locais e globais. Recomendo que analise o que está fazendo com que alguma variável tenha valor errado ao invés de ficar editando as variáveis para ver se o resto funciona.
Watch
Acho que essa é a minha funcionalidade favorita. É possível criar expressões para serem monitorados. É muito útil quando se tem expressões em loop e entender por que o loop não está se comportando como deveria. Por exemplo:
while ( (a + b) > 10) {
//faz algo
}Se está saindo do loop antes do esperado, podemos adicionar “a + b” no Watch para ver quando que essa expressão é maior que 10 e não deveria.
Call Stack
Exibe a pilha de chamadas, é útil para quando o projeto é grande e pode estar confuso de entender qual caso de uso está causando defeito.
Essa foi uma apresentação geral do depurador do Visual Studio Code, o que vocês acharam? Estão preparados para abandonar os prints no código? Comente abaixo o que você achou dessa incrível ferramenta!