Depurando Como um Profissional com as Ferramentas Integradas do VS Code

Todo desenvolvedor JavaScript começa com console.log(). É rápido, funciona e é familiar. Mas quando você está rastreando um bug através de múltiplas chamadas de função, operações assíncronas ou mudanças complexas de estado, o logging no console se torna um jogo de acertar a toupeira. Você acaba poluindo seu código com instruções de log, reconstruindo constantemente e ainda perdendo o quadro completo.

O depurador integrado do VS Code muda isso. Em vez de adivinhar o que seu código está fazendo, você pode pausar a execução, inspecionar variáveis em qualquer ponto, percorrer funções linha por linha e entender exatamente como sua aplicação se comporta. Este artigo mostra como aproveitar essas ferramentas poderosas para depuração de JavaScript, TypeScript, React e Node.js—transformando horas de frustração em minutos de resolução focada de problemas.

Configurando a Depuração no VS Code para JavaScript e TypeScript

Criando Sua Configuração launch.json

O coração da depuração no VS Code é o arquivo launch.json. Pressione F5 em qualquer projeto JavaScript e o VS Code solicitará que você crie um. Aqui está uma configuração básica para depurar JavaScript no VS Code:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current File",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Para TypeScript, adicione suporte a source maps na sua configuração:

{
  "type": "node",
  "request": "launch",
  "name": "Debug TypeScript",
  "program": "${file}",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "sourceMaps": true,
  "skipFiles": ["<node_internals>/**"]
}

Controles Essenciais de Depuração

Uma vez configurado, a depuração se torna direta:

• Defina breakpoints clicando à esquerda de qualquer número de linha (ou pressione F9)
• Inicie a depuração com F5
• Step over no código com F10 (executa a linha atual)
• Step into em funções com F11 (mergulha nas chamadas de função)
• Step out com Shift+F11 (completa a função atual)

O painel Variables mostra todas as variáveis locais e globais no escopo. O painel Watch permite rastrear expressões específicas. O Call Stack mostra seu caminho de execução—inestimável para entender como você chegou a um ponto específico.

Técnicas Avançadas de Breakpoints

Breakpoints Condicionais

Clique com o botão direito em qualquer breakpoint e selecione “Edit Breakpoint” para adicionar condições. O depurador só pausa quando sua condição avalia como verdadeira:

// Condição do breakpoint: user.role === 'admin'
// Só para para usuários admin

Logpoints: O Console.log Melhorado

Logpoints imprimem no Debug Console sem parar a execução. Clique com o botão direito na margem e selecione “Add Logpoint”. Use chaves para expressões:

User {user.name} triggered action at {new Date().toISOString()}

Não é mais necessário remover console.logs antes de fazer commit—logpoints existem apenas durante sua sessão de depuração.

Depuração React com Integração de Navegador

Configurando a Depuração de Navegador para React

Para aplicações React, use o JavaScript Debugger integrado do VS Code (a extensão Debugger for Chrome agora está obsoleta). Configure-o para aplicações React usando Vite ou Create React App:

{
  "type": "pwa-chrome",
  "request": "launch",
  "name": "Debug React App",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src",
  "sourceMaps": true
}

Inicie seu servidor de desenvolvimento (npm start), depois pressione F5. O VS Code abre o Chrome e conecta o depurador. Defina breakpoints diretamente em seus componentes React, inspecione props e state, e percorra renderizações—tudo do VS Code.

Depurando o State de Componentes React

Coloque breakpoints dentro de hooks useEffect, manipuladores de eventos ou funções de componentes. O painel Variables mostra valores atuais de props, state e dependências de hooks. Use o Debug Console para testar expressões contra o contexto atual do seu componente.

Recursos do Depurador Node.js no VS Code

Auto Attach para Depuração Rápida

Habilite o Auto Attach na Paleta de Comandos (Ctrl+Shift+P > “Toggle Auto Attach”). Configure para o modo “smart”. Agora qualquer processo Node.js iniciado do terminal do VS Code conecta automaticamente ao depurador—sem necessidade de configuração.

Depurando Operações Assíncronas

A integração do depurador Node.js no VS Code se destaca na depuração assíncrona. Defina breakpoints dentro de funções async, cadeias de Promises ou callbacks. O Call Stack mostra claramente o caminho de execução assíncrona, facilitando o rastreamento através de fluxos assíncronos complexos.

Otimizando Seu Fluxo de Trabalho de Depuração

Usando o Debug Console Efetivamente

O Debug Console não é apenas para saída—é um REPL conectado ao seu contexto de execução pausado. Teste correções, inspecione objetos ou chame funções diretamente:

// Enquanto pausado em um breakpoint:
// > user.permissions
// ['read', 'write']
// > calculateTotal(cart.items)
// 45.99

Pule Arquivos para Focar no Seu Código

Adicione isto ao seu launch.json para pular código de bibliotecas:

"skipFiles": [
  "<node_internals>/**",
  "node_modules/**"
]

O depurador não entrará nesses arquivos, mantendo você focado na lógica da sua aplicação.

Conclusão

As ferramentas de depuração do VS Code transformam como você entende e corrige código. Em vez de console.logs espalhados, você obtém uma visão completa do estado da sua aplicação em qualquer momento. Breakpoints condicionais e logpoints reduzem o ruído da depuração. A integração com navegador traz a depuração frontend para seu editor. O Auto Attach torna a depuração Node.js sem esforço.

Comece pequeno—substitua seu próximo console.log() com um breakpoint. Percorra o código. Inspecione variáveis. Uma vez que você experimente a clareza das ferramentas adequadas de depuração, você vai se perguntar como conseguiu sem elas. O tempo investido em aprender esses recursos se paga imediatamente em correções de bugs mais rápidas e compreensão mais profunda do código.

Perguntas Frequentes

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.