Debug Typescript with VSCode

Typescript Debugging using Visual Studio Code and ts-node

Updated: 03 September 2023

It’s possible to debuge any TS file without compiling using ts-node from VSCode

First, init a new npm project with typescript (normally you should already have one):

Terminal window
1
npm init -y
2
npm install typescript
3
npx tsc --init # this isn't needed, but really you should have a tsconfig

Now - time to start: install ts-node:

Terminal window
1
npm install ts-node

Next, create a .ts file to debug, e.g:

log.ts

1
const log = (name: string) => {
2
  console.log('hello ' + name)
3
}
4


5
log('bob')

Then create a .vscode/launch.json file:

.vscode/launch.json

1
{
2
  // Use IntelliSense to learn about possible attributes.
3
  // Hover to view descriptions of existing attributes.
4
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5
  "version": "0.2.0",
6
  "configurations": [
7
    {
8
      "name": "Current TS File",
9
      "type": "node",
10
      "request": "launch",
11
      "args": ["${relativeFile}"],
12
      "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
13
      "sourceMaps": true,
14
      "cwd": "${workspaceRoot}",
15
      "protocol": "inspector"
16
    }
17
  ]
18
}

And that’s about it, you should be able to use the debug config on whatever TS file you’re looking at without any added effort