How to debug server side TypeScript code in WebStorm

Question

Comparing this to Visual Studio Code all you need to do is allow source maps and VSCode will debug TypeScript however I can't achieve the same on WebStorm.

I can easily debug server side JavaScript in WebStorm but not TypeScript

Answer 1

was trying to find a way to let Webstorm/Intellij to watch the TS file change and restart server in debug mode. Looks like ts-node-dev which IHMO is faster than nodemon in terms of live-reload because it shares Typescript compilation process between restarts.

npm i ts-node-dev --save-dev

Then in your Run/Debug Configuration, add a node.js config with below params:

JavaScript file ---> node_modules/ts-node-dev/lib/bin.js

Applicationi parameters ---> --respawn -- src/script/local.server.ts

Now save the config and run with Debug, you should be able to set break point as well as live reload server on any TS code change.

I wrapped up a small library for this if you happen to develop with aws lambda

https://github.com/vcfvct/ts-lambda-local-dev

Answer 2

Just want to add what worked for me with Webstorm 2021.1.1

I found the easiest way is to go to your package.json and right click the green triangle next to the npm script you want to run. Then select debug.

I am able to apply the breakpoints to my typescript code and it works perfectly. Coming from .Net where it was always pretty straight forward to debug, I am glad to see webstorm making it just as simple.

This is my npm script that I choose to debug.

"dev": "env-cmd -f ./config/dev.env concurrently -k -n COMPILER,NODEMON -c gray,blue \"tsc -w\" \"nodemon -w dist dist/index.js\"",

Answer 3

For anyone else wrestling with debugging TypeScript in WebStorm/IDEA, I had similar frustrations as OP (possibly for different reason). My issue was simply that I didn't set the working directory to the dist folder in the node run configuration. I am running tests in Jest and assumed the working dir should be the root of my project. Set it to dist and debugging started working!

Further info...

Source .ts files in src

Typescript version: 2.0.3

File tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs",
    "noImplicitAny": false,
    "outDir": "dist",
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es6",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Jest config (in package.json):

  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/ts-jest/dist/preprocessor.js",
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
  }

Run configuration...

Working directory: <project_root>/dist

Javascript file: ../node_modules/jest-cli/bin/jest.js

Application params: --runInBand

Hope it helps!