Ts-node: Can support WebStorm breakpoint ?

[k8w]

Can I debug in WebStorm running as ts-node?

[blakeembrey]

Probably not. There's no API for dynamic source maps and isn't really a ts-node issue but a node.js issue. If it's possible, someone can point me to, until then see https://github.com/TypeStrong/ts-node/issues/46.

[k8w]

NodeJS can debug in Webstorm, and WebStorm support to specify a node Runner
(Run / Edit Configurations / Node.js / Node interpreter)

I tried to set it as ts-node

Seems WebStorm run a debug command as:

D:\Program Files (x86)\JetBrains\WebStorm 2016.2.1\bin\runnerw.exe" C:\Users\King\AppData\Roaming\npm\ts-node --debug-brk=59672 --expose-debug-as=v8debug E:\test\test.ts

If NodeJS , it should be:

XXX\runnerw.exe" XXX/node.exe --debug-brk=59672 --expose-debug-as=v8debug XXX.js

and finally got a error:

CreateProcess failed with error 193 (no message available)

So don't know if it's a problem about params --debug-brk=59672 --expose-debug-as=v8debug

[blakeembrey]

Yes, I know. This, as I mentioned, is related to source maps. Even if you can debug (which you can) there's no point because it doesn't know where the debugger is located in relation to the TypeScript file.

[blakeembrey]

By the way, you can add any of the extra flags to https://github.com/TypeStrong/ts-node/blob/master/src/bin.ts. It looks like --export-debug-as is missing.

[ncochard]

In case it is useful to somebody...

Debugging in WebStorm using ts-node works well on a Mac.
Unfortunately, it does not work well on Windows because of the following bug which was fixed yesterday.
https://youtrack.jetbrains.com/issue/WEB-21753

Hopefully, a new release of WebStorm will soon be available with this fix.

[cevek]

@ncochard Can you please explain how do you debug in webstorm by use breakpoints, I have mac and latest webstorm and my breakpoints just skipped, but it works if I put debugger statement

[ncochard]

@cevek I've prepared a sample project at the following URL.
https://github.com/ncochard/sample-ts-project.git
If I have not made any mistake, you should be able to just clone that project (on your Mac), place a breakpoint in the unit tests and start debugging.

[cevek]

@ncochard Thank you! That works for me!

[ghost]

For anyone who is still having issues (for me I didn't want to use mocha just debug typescript files). If you add --require ts-node/register to Additional Parameters for node it should work. (see image)

[sinedied]

@thed0ctor Thank you so much!! I've been struggling with this, and just adding this magical --require ts-node/register made it work 👍

EDIT: Argh, it worked because I forgot a debugger; statement, but using WebStorm breakpoints still do not work :/
I see that in your example project your perform a static .ts compilation, but I would prefer to use ts-node all the way.

[ghost]

@sinedied it's actually supposed to be in the "node parameters" box. I ran into issues when I added arguments to my app

[sinedied]

Yes, I did that but I can't make webstorm breakpoints to work using just ts-node and not the tsc compiler. I'm on OSX by the way.

[ghost]

@sinedied I'm using IntelliJ IDEA which shouldn't make a difference. Do you have a simple hello world project that recreates the issue? And I mean bare minimum simple project

[sinedied]

@thed0ctor when making a simple project to demonstrate the issue, I found the solution: I was using the "mapRoot": "./" option is tsconfig.json, removing it made debugging works! :tada:

The problem is that automatic imports are not so nice now, but hell yeah I can debug properly!

[josephfinlayson]

@sinedied can you share your solution?

[sinedied]

Here is my tsconfig.json:

{
  "compilerOptions": {
    "lib": ["es6"],
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es6",
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [ "node_modules/@types" ]
  }
}

As for the WebStorm task, here it is:

Then I just start in debug mode and breakpoints works 😃

[La-source]

A big thank you for your @sinedied response that works great.

By cons, how to adapt for npm? In my project I use process.env variable positioned by npm which I do not have via the debugger since it is node and not npm.

[sinedied]

@La-source You can set environment variables in webstom tasks too. Instead of a NodeJS task, you can create a NPM task, and use the same node parameters in your NPM script as shown on the screenshot above.

[jasonLiu001]

@sinedied Thanks. I have solved my trouble according to your comment. Very helpful.

[Evilart86]

just configure _ts-node_ interpreter

1. Install _ts-node_: npm i ts-node --save
2. Add configuration
   
3. Choose Node.js Configuration template
   
4. Choose Working directory and JavaScript file(your Typescript entry point)
   
5. Add _ts-node_ interpreter: click + and "Add Local..."
   
6. Find installed _ts-node_ interpreter (our first step)
   
7. Choose interpreter
   
8. Final configs
   

Ready
You can run and debug your code

[Jeff-Tian]

I made it work by add a script to package.json as follows:

node $NODE_DEBUG_OPTION --require ts-node/register src/index.ts

So I can click "debug" button to start the debug session:

[quantuminformation]

Anyone managed to get it to work with ts-node-dev?

https://github.com/whitecolor/ts-node-dev/issues/75

Jeff, your solution works great for ts-node

[LastKing]

webstorm 2019
ts-node @ 7.x
typescript @ 3.7.x
npm typescript

i use the config can debug typescript file .

[xusai2014]

I made it work by add a script to package.json as follows:

node $NODE_DEBUG_OPTION --require ts-node/register src/index.ts

So I can click "debug" button to start the debug session:

It's great.
The solution is also approriate for Babel-node debug