Debugging TypeScript in VSCode

March 22, 2019

I am a big fan of using ts-node for working with TypeScript from within Node.js. During development I fire up my app with ts-node src/index.ts rather than doing an intermediate tsc build step and then pointing Node at the .js output. Sure, ts-node is still calling TypeScript under the hood but it makes the whole process smooth.

I also like using the VSCode debugger for debugging my TypeScript. With the help of ts-node this is also a smooth process. Here’s how you do it.

First, install the ts-node dependency into your Node.js app by running npm install ts-node.

Then, create your entry TypeScript file. For this example, I’ll create index.ts in the project root and it looks like this:

const foo = 1;
console.log(foo);

Now, add (or modify) a .vscode/launch.json file so that looks like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug index.ts",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeArgs": ["-r", "ts-node/register"],
      "args": ["${workspaceRoot}/index.ts"]
    }
  ]
}

Now, add a breakpoint in your TypeScript code.

Now, start debugging in VSCode:

Volila! You’re now debugging your TypeScript without having to fuss with an intermediate transpile step or fussing with sourcemap settings.

I’ve created a repo called vscode-debugging-ts-code that has all of the setup correctly. Using this project looks like this:

Discuss on Twitter