VSCode TypeScript debugging

The VS Code debugger is pretty awesome. You can learn more about it in the official guide.

If you want to debug typescript it does not work out of the box. You will need to add two small configuration steps:

tsconfig.json - Enable Sourcemaps

If you do not have a tsconfig.json you can create one with the command tsc --init. Then you simply have to set the flag sourceMap: true.

{
  ...
  "sourceMap": true,
  "outDir": "./dist",
  "rootDir": "./src",
  ...
}

VSCode launch.json

In VSCode open your entryfile (e.g. main.ts, index.ts) and press F5 and choose “Node.js”. The only thing that you need to add is the "preLaunchTask": "tsc: build - tsconfig.json",

Your launch.json should look similar to this:

{
	// Use IntelliSense to learn about possible attributes.
	// Hover to view descriptions of existing attributes.
	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"type": "node",
			"request": "launch",
			"name": "Launch Program",
			"preLaunchTask": "tsc: build - tsconfig.json",
			"program": "${workspaceFolder}\\src\\main.ts",
			"outFiles": ["${workspaceFolder}/**/*.js"]
		}
	]
}

Note: When VSCode detects a tsconfig.json file it also detects the tasks tsc: build - tsconfig.json and tsc: watch - tsconfig.json (Whitespace in the name is important)

Test your setup

Now debugging should be set up correctly. To test if it works, set a breakpoint in your file and press F5.