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

Question

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

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

Answer 1

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

更多信息......

src

中的来源.ts文件

打字稿版本：2.0.3

档案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配置（在package.json中）：

  "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

希望它有所帮助！

Answer 2

试图找到一种方法让 Webstorm/Intellij 观察 TS 文件更改并在调试模式下重新启动服务器。看起来像 ts-node-dev，IHMO 在实时重新加载方面比 nodemon 更快，因为它在重新启动之间共享 Typescript 编译过程。

<块引用>

npm i ts-node-dev --save-dev

然后在您的 Run/Debug Configuration 中，添加具有以下参数的 node.js 配置：

JavaScript file ---> node_modules/ts-node-dev/lib/bin.js

Applicationi parameters ---> --respawn -- src/script/local.server.ts

现在保存配置并使用 Debug 运行，您应该能够在任何 TS 代码更改时设置断点以及实时重新加载服务器。

如果您碰巧使用 aws lambda

开发，我会为此打包一个小型库 <块引用>

https://github.com/vcfvct/ts-lambda-local-dev

Answer 3

为了围绕打字稿来源运行WebStorm（2017.2.3）调试器，我做了：

1. 设置Node.js配置：
   • 工作目录：root/of/the/project（位于我的package.json）
   • JavaScript文件：dist/index.js

2. 我正在用gulp-typescript编译我的TypeScript，但更重要的是源映射文件。所以对于编译使用如下的任务：

   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')),
     ]);
   });
   

位于＆＃39;。/ app＆＃39;中的所有源TS文件文件夹，位于./dist文件夹中的所有编译文件。最重要的源文件选项sourceRoot，错误的值不会将您带到ts文件。

按sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' }我在.map文件旁边写.js个文件并引用app文件夹。我不需要在.map个文件中提供内容，因为它已经存在（app文件夹）。

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

Answer 4

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

首先添加您的package.json文件：

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

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

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

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

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