How To Debug Typescript In VSCode

Let's take a look at how we can configure VSCode's built-in debugger to debug a Typescript Node application.

First, you have to install these dependencies (I prefer installing them as dev dependencies):

npm install --save-dev typescript ts-node tsconfig-paths

Next, go to the debug tab, and add a JSON configuration file named launch.json with these contents:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "ts-debug",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.ts",
      "runtimeArgs": [
        "-r",
        "ts-node/register",
        "-r",
        "tsconfig-paths/register"
      ],
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

Feel free to change the name field to anything you like.

The most important part here is runtimeArgs, which contains optional arguments to be passed to the runtime executable.

We write "-r" which stands for require to register ts-node and tsconfig-paths. tsconfig-paths is used to load modules whose location is specified in the paths section of tsconfig.json.

Finally, make sure the program field points to the entry point of your app.

That's it. You're done with the configuration. Now, you can put breakpoints on your code, and click on the start debugging icon or simply press the keyboard shortcut, F5, to debug.