关于调试：如何在WebStorm中调试服务器端TypeScript代码


How to debug server side TypeScript code in WebStorm

将其与Visual Studio Code进行比较，您所要做的就是允许源映射，而VSCode将调试TypeScript，但是我无法在WebStorm上实现相同功能。

我可以轻松调试WebStorm中的服务器端JavaScript，但不能调试TypeScript

相关讨论

对于其他在WebStorm / IDEA中尝试调试TypeScript的人来说，我与OP有类似的挫败感(可能出于不同的原因)。我的问题很简单，我没有在节点运行配置中将工作目录设置为dist文件夹。我正在Jest中运行测试，并假定工作目录应该是我项目的根目录。将其设置为dist并开始调试！

更多信息...

src

中的.ts源文件

typescript版本：2.0.3

文件tsconfig.json：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
 "compilerOptions": {
   "jsx":"react",
   "module":"commonjs",
   "noImplicitAny": false,
   "outDir":"dist",
   "preserveConstEnums": true,
   "removeComments": true,
   "sourceMap": true,
   "target":"es6",
   "moduleResolution":"node"
  },
 "exclude": [
   "node_modules",
   "dist"
  ]
}

笑话配置(在package.json中)：

1
2
3
4
5
6
7
8
9
 "jest": {
   "scriptPreprocessor":"<rootDir>/node_modules/ts-jest/dist/preprocessor.js",
   "testRegex":"(/__tests__/.*|\\\\.(test|spec))\\\\.(ts|tsx)$",
   "moduleFileExtensions": [
     "ts",
     "tsx",
     "js"
    ]
  }

运行配置...

工作目录：<project_root>/dist

JavaScript文件：../node_modules/jest-cli/bin/jest.js

应用程序参数：--runInBand

希望有帮助！

相关讨论

我正在使用称为ts-node的特定版本的节点。

Using

1
2
3
4
"devDependencies": {
   "ts-node":"8.1.0",
   "typescript":"3.2.4"
  },

运行npm install，node_module/.bin/目录将包含Windows所需的ts-node或ts-node.cmd。

显然，这些版本会移动。您可能会在ts-node项目的package.json内部看到它们使用的typescript版本尽可能接近。

然后您可以添加断点。我看到的唯一缺点是您必须在配置中定义Javascript文件(这是一个ts文件)，而不是右键单击运行。

如果出现xyz is not a function错误，请检查您的tsconfig.json文件没有"noEmit": false,

对于围绕typescript源运行WebStorm(2017.2.3)调试器，我做了：

  • 设置Node.js配置：

    • 工作目录：root/of/the/project(位于我的package.json所在的位置)
    • JavaScript文件：dist/index.js

  • 我正在用gulp-typescript编译我的TypeScript，但更重要的是源映射文件。因此，用于编译的任务如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    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')),
      ]);
    });

    • 位于'./app'文件夹中的所有源TS文件，位于./dist文件夹中的所有已编译文件。最重要的源文件选项sourceRoot，错误的值不会使您进入ts文件。

    通过sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' }，我在.js文件旁边写入了.map文件，并引用了app文件夹。我不需要.map文件中的内容，因为它已经存在(app文件夹)。

    感谢@Ekaterina，我能够使用Typescript运行Node debug。