How To Debug Typescript Node Application With Vscode Typescript VSCode

Nov 19th, 2021 - written by Kimserey with .

In today’s post we will look at how we can enable the debugger with a Typescript Node application which uses nodemon and ts-node with the goal of being able to breakpoint in VSCode our Typescript Node application.

Setup The Debugger

When using nodemon and ts-node, the regular start script would be:

1
nodemon --exec 'ts-node src/index.ts'

Now neither nodemon nor ts-node support the node --inspect command to enable the debugger The solution to that is to require ts-node directly while passing --inspect to node:

1
nodemon --exec 'node --inspect --require ts-node/register src/index.ts'

Once we start nodemon this way we will see the following message in the terminal:

1
2
Debugger listening on ws://127.0.0.1:9229/fbfa7597-16a3-4745-a88d-23c8ba4c21b1
For help, see: https://nodejs.org/en/docs/inspector

We managed to start the debugger properly.

Breakpoint In Vscode

Our application is now setup, the next step is to attach the VSCode debugger to it. To do that we can levarage the launch.json:

1
2
3
4
5
6
7
8
9
10
11
12
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node"
    }
  ]
}

This launch setting can automatically be generated by selecting NodeJS: Attach by process ID template in the list provided. Then once we start the debugger, we can select our nodemon process.

Once we select the right process, we should see the following message in the terminal:

1
Debugger attached.

And that’s it, all we have left to do is put breakpoints in our application in VSCode and the debugger should kick in!

Conclusion

In today’s post we looked at how we can enable the debugger on a Node application written in Typescript and running with nodemon. We then saw how we could attach a VSCode debugger to the nodemon process in order to enable breakpoints in VSCode. I hope you liked this post and I’ll see you on the next one!

Designed, built and maintained by Kimserey Lam.