TypeScript Debugging in Visual Studio Code: Complete Guide

Introduction

Debugging is an essential part of software development, and Visual Studio Code (VS Code) offers powerful tools for TypeScript debugging. This guide will show you how to configure and start debugging a TypeScript project using VS Code’s built-in debugger and custom launch configurations. With TypeScript debugging, you can step through code, set breakpoints, and inspect variables to catch errors early and improve your development process.

If you don’t know how to create a TypeScript project, check out our dedicated article: How to Install TypeScript and Create Your First Application.

1. Compilation and Debug Settings

TypeScript code must be compiled into JavaScript before it can be executed and debugged. Modify the tsconfig.json file to enable the generation of source map files (sourceMaps).

Previously, the configuration was as follows:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}

Now, with the addition of sourceMap, it becomes:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true
  }
}

Insight

• sourceMap: Enables the generation of source maps (sourceMaps), allowing you to debug TypeScript code while viewing the original source instead of the compiled JavaScript.

For a detailed explanation of other fields, refer to the official TypeScript documentation.

2. Configuring the Debugger in VS Code

To enable debugging, create a .vscode/launch.json file and add the following configuration:

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

This configuration:

• Runs debugging with Node.js
• Launches the index.ts file from the src folder
• Uses compiled files from the dist folder
• Enables source maps to facilitate debugging
• Executes the build task before starting debugging

3. Adding Breakpoints and Debugging

Open a TypeScript file and set a breakpoint by clicking on the left margin of the desired line. Start debugging by pressing F5 or clicking the play icon in the VS Code Debug panel.

You can also use debugger; in the code to automatically pause execution:

function greet(name: string): string {
    debugger;
    return `Hello, ${name}!`;
}

console.log(greet("World"));

When the code reaches this line, the debugger will automatically pause execution.

Conclusion

By following these steps, you can easily configure TypeScript debugging in Visual Studio Code. This will help you identify and fix bugs in your code more quickly and efficiently.