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

Question

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

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

Answer 1

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

更多信息......

源.ts文件 src

打字稿版本: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 config(in 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文件的变化并以调试模式重新启动服务器。看起来哪个 IHMO 比实时重新加载ts-node-dev更快，因为它在重新启动之间共享Typescript 编译过程。nodemon

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