How to debug TypeScript code

· Category: TypeScript

Short answer

Enable sourceMap: true in tsconfig.json, generate .js.map files, and configure your debugger to map breakpoints back to original .ts sources.

Steps

  1. Enable source maps in tsconfig.json: "sourceMap": true
  2. Compile your project with tsc.
  3. In VS Code, create a launch.json with preLaunchTask set to your build task.
  4. Set breakpoints directly in .ts files.
  5. For Node.js, use ts-node --inspect or compile first and debug the output with source maps.

Tips

  • Inline source maps (inlineSourceMap) reduce file clutter but increase output size.
  • Ensure outDir and rootDir are correctly mapped in the debugger configuration.

Common issues

  • Missing or misaligned source maps cause breakpoints to bind to compiled JavaScript instead of TypeScript.
  • Debugging transpiled async/await may step through helper code unless targeting modern ES versions.