How to debug TypeScript in WebStorm Node.js Remote Debug?

Question

I have a TypeScript Node.js Restify app running inside Docker container. I can connect the WebStorm Node.js Remote Debugger, but I can only debug the compiled JS files and not the TS files.

In the tsconfig.json I have "sourceMap": true set.

Is there anything I am missing?

Answer 1

I have found a solution using ts-node there are a few steps that you should do for doing it.

First, you must add "esModuleInterop": true and "sourceMap": true to your tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}

After that, you should install the ts-node package.

npm i -D ts-node

The last step is adding to edit the Run/Debug Configurations of the WebStorm.

Go to Run/Debug Configurations window.

Add new Node.js configuration using the +.

Change the Node parameters to --require ts-node/register

Then, change the Javascript file to your Typescript file, for me it is: src/app.ts

Press the OK button.

Run this configuration as dubug.