Como usar o depurador de código do Visual Studio Code

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": [
                "/**"
            ],
            "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.

Breakpoint criado na linha 2

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.

Tela após a execução do programa atingir um breakpoint

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!

Deixe um comentário

O seu endereço de e-mail não será publicado.