14

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

Improve this question
9
  • 1
    What WebStorm version do you use? Do you have source maps? Debugging in the Imageboard sample project (github.com/Microsoft/TypeScriptSamples/tree/master/imageboard) works fine for me: I start a Node.js debug session for server.js file and breakpoints that are put in server.ts are hit. Commented Apr 18, 2016 at 12:30
  • I am using the latest version "2016.1". I will give that a try. So all you do is compile your ts files and start a new debugging session then WebStorm will automatically pick the ts files breakpoints? Commented Apr 18, 2016 at 13:55
  • Yes, I'm using a built-in WebStorm TypeScript compiler to compile the code and generate the source maps. Breakpoints are set in TS file, thanks to the source maps WebStorm can stop on them. If you still have problems with debugging your app, please report an issue with more details on youtrack.jetbrains.com/issues/WEB Commented May 3, 2016 at 12:56
  • @Ekaterina, how would you manage if the generated js files and maps where on a different folder e.g: a dist folder. In VSCode you have an output path setting but I can't find anything similar in Webstorm. Commented Oct 3, 2016 at 15:32
  • @robertohuertasm you can either check Use output path and specify the path to the fist folder (simply dist, if it's in the project root) in Preferences | Languages and Frameworks | TypeScript (under Enable TypeScript compiler) or add tsconfig.json file that would describe your project configuration (including the output directory) and point a built-in compiler to it. Commented Oct 4, 2016 at 17:05

7 Answers 7

Reset to default
8

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

[edited] It seems to work even in the root directory, what made it work for me was using the 'node' run configuration and not 'npm script'.
Setting outDir in the compiler options did the trick for me.
8

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

enter image description here

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

Improve this answer

2 Comments

I'm a little late to the party. I managed to make debugging "work" with your information. As in, enabling "break at first line" it does break in the index.js. However, I can't get to the breakpoints if I run an EP call from the browser. Any tips?
@Erythros what do you mean by EP call? once you run the debug in webstore, you should be able to set breakpoints in your xxx.ts as long as your source map is configured at tsconfig.json. As it should also do live reload on change because ts-node-dev is watching change and recompile and re-spawn.
3

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\"",
Improve this answer

Comments

2

I'm using a specific version of node called ts-node.

Using ts-node with Webstorm

First add in your package.json file:

"devDependencies": {
    "ts-node": "8.1.0",
    "typescript": "3.2.4"
  },

Run npm install and the node_module/.bin/ directory will include the ts-node or ts-node.cmd required for Windows.

Obviously these versions will move. You may see inside the package.json of ts-node project which version of typescript they are using to be the closest as possible.

Then you can add breakpoints. The only downside I see is that you must define the Javascript file (which is a ts file) into the configuration, instead of just right-click + run.

If you have the xyz is not a function error, check that your tsconfig.json file doesn't have "noEmit": false,

Improve this answer

Comments

2

There is not much needed to debug a Node.js project with TypeScript when using Webstorm/IntelliJ.

You should make sure you have enabled source maps in your tsconfig.json:

//tsconfig.json
{
  "compilerOptions": {
    ...,
    "sourceMap": true,
    ...
  }
}

Source maps will be needed to allow you to set breakpoints directly in your TypeScript files.

Then you should remember to use Node option --inspect or --inspect-brk. I would suggest in most cases to use inspect-brk since this one is pausing execution once Node is up and running.

You can add simple script to run your TypeScript Node app using eg. ts-node in a package.json:

//package.json
{
  "scripts": {
    "dev-debug": "ts-node --inspect-brk src/index.ts" 
  }
}

And run that using pnpm|yarn|npm package manager:

#shell
pnpm run dev-debug

Then in your shell you will get nice URL like ws://127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e which you can use to attach to your debugger.

To do that in WebStorm/IntelliJ you can just click on it with keys pressed:

⇧ + ⌘ + Click

Ctrl + Shift + Click

Keys depends on your OS.

After that you will have your debugger up and running in an IDE.

Improve this answer

Comments

1

For running WebStorm(2017.2.3) debugger around typescript sources I did:

  1. Setup Node.js configuration:
    • Working directory: root/of/the/project (where located my package.json)
    • JavaScript file: dist/index.js

  2. I am compiling my TypeScript with gulp-typescript, but more important the source-map files. So for compiling was used task like below:

    const gulp = require('gulp');
const ts = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const merge = require('merge2');

const tsProject = ts.createProject('tsconfig.json', {
  declaration: true,
  typescript: require('typescript'),
});

gulp.task('default', () => {
  const result = gulp.src('./app/**/*.ts')
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.identityMap()) // optional
    .pipe(tsProject());

  return merge([
result.js
      .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' }))
      .pipe(gulp.dest('dist')),
    result.dts
      .pipe(gulp.dest('dist')),
  ]);
});

All source TS files located in './app' folder, all compiled files located in ./dist folder. Most important source-files option sourceRoot, wrong value not bring you to ts file.

By sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' } I am writing my .map files beside .js files and make reference to app folder. I no need content in .map files because it's already there (app folder).

Thanks to @Ekaterina I was able to run Node debug with Typescript.

Improve this answer

Comments

0

Create a package.json with a build and start scripts:

//package.json

{
...
"scripts": {
    "start": "npm run build && node ./dist/index.js",
    "build": "webpack --config ./webpack.config.js",
...
}

In this configuration, all compiled files are located under dist/. The entry point is index.js.

Make sure your tsconfig.json has the sourceMap option enabled:

//tsconfig.json

{
...
    "compilerOptions": {
        "sourceMap": true
    }
...
}

In your webpack.config.js file, make sure you have the following properties as shown below:

//webpack.config.js

module.exports = {
    mode: 'development', // This is important!, if you set 'production' it won't let you debug
    devtool: 'source-map',
    ...
}

Finally, set up your WebStorm Run/Debug Configuration as follows:

...
package.json: ~/path/to/your/package.json
Command: run
Scripts: start
...

Now add a breakpoint and start debugging

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.