How to debug server side TypeScript code in WebStorm

问题

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

回答1:

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!

回答2:

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

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

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.

回答3:

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

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,

来源：https://stackoverflow.com/questions/36661384/how-to-debug-server-side-typescript-code-in-webstorm

标签

debugging

typescript

WebStorm

server-side