New Webstorm is missing debug integration with Typescript

I'm using Webstorm 2019.3 and I seem to be missing automatic debug integration with typescript (for node)

I had green debug circles in version like 2018. I do know that I can go to "run" -> edit configuration -> and do a lot of manual steps (specifying the test name or filename) but it's so freaking inconvenient now.

Here's the example of how it was before and now(the 2nd screen is taked from Pycharm/python)

related stack-overflow question

5 comments
Comment actions Permalink

Running .ts files has never been supported, as Node.js can't run Typescript directly, it has to be pre-compiled.

Your first screenshot is likely taken from either PyCharm or IDEA, and refers to running Nose tests and not TypeScript  files.

The easiest way to run TypeScript files from the IDE is using the ts-node:

  • Install ts-node using npm or yarn.
  • Create a new Node.js run/debug configuration.
  • Add --require ts-node/register to the Node parameters field.
  • In the JavaScript file field add $FilePathRelativeToProjectRoot$.
  • Save configuration.
  • Use it to run (or debug) a file that is currently opened in the editor or selected in the Project view. You can do that using the icons on the navigation bar or Run... action.

If you need to pass any additional parameters to ts-node (e.g. --project tsconfig.json), you can add them to the Application parameters field in the run/debug configuration.

 

If you don't like installing any additional tools, you can use the built-in TypeScript compiler:

  • Add tsconfig.json file to your project.
  • Create a new Node.js run/debug configuration.
  • In the Before Launch section, click Add and select Compile TypeScript.
  • Select tsconfig.json.
  • In the JavaScript file field you need to select the path to the compiled file.
    • If a compiled JavaScript lives next to its source, add $FileRelativeDir$/$FileNameWithoutExtension$.js
    • If files are saved in an output folder (preserving the folder structure), add the folder name before the pattern, e.g. build/$FileRelativeDir$/$FileNameWithoutExtension$.js
  • Save configuration.
  • Use it to run (or debug) a file that is currently opened in the editor or selected in the Project view.

It all works in WebStorm right now.

 

 

 

0
Comment actions Permalink
can the steps you highlighted be automated when we choose to run typescript file directly ?
 
From what you describe, there are two general path to directly run ts file,
- tsnode  method
- tsconfig.json method
 
and it look like user can choose method once, and next time user should be able to run/debug ts file directly (behind the scene, webstorm will just create the configuration profile with those info automatically filled in.
 
It is really unproductive that it take too many steps to run ts file directly consider that this is what developer expect it to do.
 
0
Comment actions Permalink

Hi Elena,

thank for the reply, I actually comment there as well.

The additional variables ( FileRelativeDir + FileNameWithoutExtension)  that you use is very useful and found that it is not officially documented  as in https://stackoverflow.com/questions/44802832/phpstorm-template-variables-documentation

Use these variables mean that we can use a single configuration profile without creating individual profile for each source file to run/debug.

By the way, I found that both have to be set to commonjs in  for the tsnode method. It is documented in (https://github.com/TypeStrong/ts-node).

- Set both tsconfig.json, package.json to commonjs  to directly run ts file with tsnode during development

    -  tsconfig.json   =>  "module": "commonjs"

    - package.json  => "type": "commonjs"

 

after which, can tsc to transpile the project for production.

 

by the way, can webstorm able to debug directly using source map within webstorm ide (not using browser)  when debugging ts file ? The use case is that i debugging the typescript file directly and does not want to create any server interaction (eg express lib )

 

0
Comment actions Permalink

>can webstorm able to debug directly using source map within webstorm ide (not using browser) when debugging ts file ? The use case is that i debugging the typescript file directly and does not want to create any server interaction (eg express lib )

 

Not sure I understand what you are talking about... Debugging is not possible without executing the code; and Webstorm itself doesn't run it - it is done by either browser or Node.js interpterer. So the client-side code can't be run/debug without a browser, and server-side - without Node.js

 

BTW, I can suggest giving the Run Configuration for TypeScript (https://plugins.jetbrains.com/plugin/10841-run-configuration-for-typescript/) plugin a try - it adds a configuration to run .ts with ts-node

0

Please sign in to leave a comment.