Debugar TypeScript: Source Maps e VS Code

// tsconfig.json - configurações pra debug
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,

    // Source maps - a chave do debug
    "sourceMap": true,

    // Opcional: inline source maps (tudo num arquivo só)
    // "inlineSourceMap": true,

    // Opcional: incluir código fonte no source map
    // "inlineSources": true,

    // Facilita navegação no debugger
    "declaration": true,
    "declarationMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

// Depois de compilar (tsc), a pasta dist/ vai ter:
// dist/index.js        - código JavaScript
// dist/index.js.map    - source map
// dist/index.d.ts      - declarações de tipo
// dist/index.d.ts.map  - mapa das declarações

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug TypeScript (compilado)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/dist/index.js",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "sourceMaps": true,
      "console": "integratedTerminal",
      "preLaunchTask": "tsc: build - tsconfig.json"
    }
  ]
}

// O que cada campo faz:
// program: arquivo de entrada JavaScript
// outFiles: onde estão os .js e .js.map
// sourceMaps: ativar resolução de source maps
// preLaunchTask: compilar antes de debugar
// console: usar terminal integrado pra I/O

// .vscode/launch.json - usando ts-node
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug TypeScript (ts-node)",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "node",
      "runtimeArgs": [
        "--require", "ts-node/register"
      ],
      "args": ["${workspaceFolder}/src/index.ts"],
      "sourceMaps": true,
      "console": "integratedTerminal",
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ]
    },
    {
      "name": "Debug Arquivo Atual",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "node",
      "runtimeArgs": [
        "--require", "ts-node/register"
      ],
      "args": ["${file}"],
      "sourceMaps": true,
      "console": "integratedTerminal"
    }
  ]
}

// A config "Debug Arquivo Atual" debuga qualquer .ts que
// estiver aberto no editor. Muito útil pra testar isolado.

// 1. Breakpoint Normal (clique na margem esquerda)
//    Para a execução naquela linha.

// 2. Breakpoint Condicional (clique direito > Conditional)
//    Só para se a condição for true.
//    Exemplo: users.length > 100
//    Útil em loops - para só na iteração que importa.

// 3. Logpoint (clique direito > Logpoint)
//    Não para a execução - só loga no console.
//    Exemplo: "User {user.name} processed at {Date.now()}"
//    Substitui console.log sem modificar o código.

// 4. Hit Count Breakpoint (clique direito > Hit Count)
//    Para depois de N execuções.
//    Exemplo: 50 (para na 50ª vez que passa ali)

// 5. Exception Breakpoints (no painel de debug)
//    Para quando qualquer exceção é lançada.
//    Ativar: Debug sidebar > Breakpoints > Caught/Uncaught

// Atalhos de navegação durante debug:
// F5       = Continue (até próximo breakpoint)
// F10      = Step Over (próxima linha, sem entrar em funções)
// F11      = Step Into (entra na função)
// Shift+F11 = Step Out (sai da função atual)
// Ctrl+Shift+F5 = Restart debug session

// .vscode/launch.json - config pra debug de testes
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": [
        "jest",
        "--runInBand",
        "--no-cache"
      ],
      "sourceMaps": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "name": "Debug Teste Atual",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": [
        "jest",
        "--runInBand",
        "--no-cache",
        "${fileBasenameNoExtension}"
      ],
      "sourceMaps": true,
      "console": "integratedTerminal"
    }
  ]
}

// --runInBand: roda testes em série (necessário pra debug)
// --no-cache: evita problemas com cache do ts-jest
// ${fileBasenameNoExtension}: nome do arquivo aberto sem extensão

// .vscode/launch.json - debug no Chrome
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug no Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      "name": "Debug Next.js",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": ["next", "dev"],
      "sourceMaps": true,
      "console": "integratedTerminal",
      "serverReadyAction": {
        "pattern": "ready on",
        "uriFormat": "http://localhost:3000",
        "action": "debugWithChrome"
      }
    }
  ]
}

// A config "Debug Next.js" inicia o dev server e abre o Chrome
// com debugger automaticamente. Breakpoints funcionam tanto no
// server (API routes) quanto no client (components).