Como debugar código TypeScript com o Visual Studio Code

Texto de: Marlliton Souza

Introdução

O processo de debugging é essencial para o desenvolvimento de software, pois permite identificar e corrigir erros no código. Muitas vezes, usamos o console.log que cumpre seu propósito, porém, em projetos maiores, essa abordagem pode ser muito ineficiente.

Utilizar um debugger para analisar fluxos e encontrar erros ou valores inesperados é muito mais produtivo e neste artigo, veremos como configurar o VS Code para debugar código TypeScript no contexto do Node.js.

Criando um projeto

Para este exemplo, criaremos um projeto bem simples, já que o foco aqui não é o código e sim a configuração do debug para podermos analisar fluxos e encontrar problemas. Você pode seguir as instruções abaixo para confiugrar o projeto:

1. Crie uma pasta debug para o projeto e abra-a no VSCode.
2. Inicie o projeto com os seguintes comandos:

npm init -y
npm install --save-dev typescript
npx tsc --init

3. Crie uma pasta src para colocar o código. No final, sua estrutura deve ser semelhante a esta:

Executando código

Crie um arquivo dentro da pasta src chamado index.ts e em seguida adicione o seguinte código nele:

type User = {
  name: string;
  age: number;
  isAdmin: boolean;
};

function greet(user: User): string {
  if (user.isAdmin) {
    return `Hello, Admin ${user.name}`;
  } else {
    return `Hello, ${user.name}`;
  }
}

const user: User = {
  name: 'Alice',
  age: 30,
  isAdmin: false
};

const msg = greet(user) 

Nós podemos tentar executar esse código com o nodejs via terminal (node ./src/index.ts), o que não dará certo, pois o node não entende a sintaxe do TypeScript.

Então, para facilitar a execução do código, podemos usar uma biblioteca ao invés de usar o node. Para isso, execute o seguinte comando no terminal:

npx tsx src/index.ts 

O problema

Imagine que você espera que o usuário receba a mensagem Hello, Admin ${user.name}, mas por algum motivo ele está recebendo Hello, ${user.name}.

Neste exemplo, nós já sabemos onde está o problema só de olhar o código, mas em projetos maiores, não é isso que acontece. Pensando que o problema não seja tão óbvio, podemos pensar em colocar um console.log na função greet para vermos se o que está sendo recebido por ela é realmente o que a gente espera.

type User = {
  name: string;
  age: number;
  isAdmin: boolean;
};

function greet(user: User): string {
  if (user.isAdmin) {
    console.log("É admin")
    return `Hello, Admin ${user.name}`;
  } else {
    console.log("Não é admin")
    return `Hello, ${user.name}`;
  }
}

const user: User = {
  name: 'Alice',
  age: 30,
  isAdmin: false
};


const msg = greet(user)
console.log("Mensagem::", msg) 

Neste exemplo, já conseguimos identificar o problema, mas caso isso não acontecesse, iriamos para um nível superior no código colocar mais um console.log, e depois para o nível superior de novo e de novo até encontramos o problema. Isso é chato e repetitivo, além de nada produtivo, apesar de funcional.

Configurando o debugger

A configuração do debugger no VSCode é simples. Abra o menu lateral de debugging pressionando Ctrl + Shift + D ou clicando no ícone de inseto na barra lateral esquerda e depois em create a launch.json file.

Em seguida selecione Node.js:

Nesse momento, um arquivo será criado automaticamente pelo Visual Studio Code em seu projeto e será armazenado em .vscode/launch.json.

Dentro dele, terá uma configuração inicial bem simples:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/src/index.ts",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ]
    }
  ]
} 

Vamos adicionar algumas opções para ser possível executar o debugger corretamente:

Rodando o código com o debug

Agora, podemos adicionar um ou mais break points no nosso código clicando ao lado dos números das linhas. Esses break points são pontos onde o nosso código será "pausado" para podermos analisar melhor o que está acontecendo.

Após definir os break points, podemos executar o código utilizando o debugger. Para isso, pressione F5 no seu teclado, ou clique em run > start debugging:

O código será executado com o debugger e parará nos pontos predeterminados. Com isso, você pode verificar os valores das variáveis, retornos de funções, parâmetros, etc.

Perceba que o código parou a execução na linha 3 e já me mostra todos os valores do objeto "user". Nós também podemos verificar o retorno da função, basta clicar na segunda opção (step over) do menu que aparece no canto superior direito do print. No seu VS Code provavelmente esse menu estará centralizado.

Outra possibilidade é ficar observando valores de variáveis, como, por exemplo, a variável msg. Nese caso podemos adicionar essa variável na seção WATCH do menu debug e veremos que o retorno é “Hello, Alice”:

Conclusão

Com essa técnica de debugging, você é capaz de debugar um fluxo inteiro, ganhando muito mais agilidade e precisão na hora de debugar seu código. Também é possível debugar o código no navegador. Hoje, nosso propósito foi debugar aplicativos no contexto do Node.js, mas você pode conferir aqui se tiver interesse.