How to debug TypeScript server code in WebStorm

Question

Comparing this with Visual Studio code, all you have to do is enable source maps and VSCode to debug TypeScript, but I can't achieve the same in WebStorm.

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

Answer 1

For someone else struggling with TypeScript debugging in WebStorm / IDEA, I had similar frustrations as an OP (possibly for various reasons). My problem was that I did not set the working directory to the dist folder in the node startup configuration. I run tests in Jest and assume that the working directory should be the root of my project. Set it to dist and debugging will start working!

Additional Information...

Src source .ts files

Typescript version: 2.0.3

tsconfig.json file:

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

Jest configuration (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 Settings: --runInBand

Hope this helps!

Answer 2

To start debugging WebStorm (2017.2.3) around typescript sources I did:

• Setting up Node.js :
  • Working directory: root/of/the/project (where is my package.json )
  • JavaScript File: dist/index.js

• I am compiling typescript> with gulp-typescript , but more important source map files. Therefore, the task was used for compilation, as shown 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 the folder. / app, all compiled files located in the ./dist folder. The most important sourceRoot source file sourceRoot , an incorrect value does not lead you to a ts file.

In sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' } I write .map files next to the .js files and link to the app folder. I don't need the content in the .map files because it already exists ( app ).

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

Answer 3

I am using a specific version of a node called ts-node .

First add package.json to your file:

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

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

Obviously, these versions will move. You can see inside the package.json of the ts-node project which typescript they use to be as close as possible.

Then you can add breakpoints. The only drawback that I see is that you have to define the Javascript file (which is the ts file) in the configuration, and not just right click + execute.

If you have xyz is not a function error xyz is not a function , make sure your tsconfig.json file tsconfig.json not have "noEmit": false,