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

Question

相较于Visual Studio Code，你只需要允许源映射，VSCode就可以调试TypeScript，但我在WebStorm上无法做到同样的效果。

在WebStorm中，我可以轻松调试服务器端JavaScript，但无法调试TypeScript。

- Sul Aga

---

你使用的WebStorm版本是哪个？你有源映射吗？在Imageboard示例项目（https://github.com/Microsoft/TypeScriptSamples/tree/master/imageboard）中进行调试对我来说很有效：我为server.js文件启动了一个Node.js调试会话，并且在server.ts中设置的断点被命中。 - Ekaterina Prigara

我正在使用最新版本的“2016.1”。我会试一试。所以你所要做的就是编译你的ts文件并开始一个新的调试会话，然后WebStorm将自动选择ts文件断点？ - Sul Aga

是的，我正在使用内置的WebStorm TypeScript编译器来编译代码并生成源映射。断点设置在TS文件中，由于源映射，WebStorm可以停在它们上面。如果您仍然在调试应用程序方面遇到问题，请在https://youtrack.jetbrains.com/issues/WEB上报告更多详细信息的问题。 - Ekaterina Prigara

@robertohuertasm 如果您选择使用tsconfig.json，内置编译器将以与从命令行运行编译器相同的方式使用tsconfig文件。很抱歉，如果没有样本项目，我们无法解决调试问题。请在https://youtrack.jetbrains.com/issues/WEB上报告问题或联系技术支持https://www.jetbrains.com/support/。 - Ekaterina Prigara

@EkaterinaPrigara 我刚刚创建了问题：https://youtrack.jetbrains.com/issue/WEB-23632，并提供了一个示例项目https://gitlab.com/robertohuertasm/ws-test。 - robertohuertasm

Answer 1

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

更多信息...

源.ts文件在src中

TypeScript版本：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

希望这有所帮助！

- jugglingcats

---

它似乎甚至在根目录中也能工作，让我成功的原因是使用了“node”运行配置而不是“npm脚本”。 - John White

在编译选项中设置 outDir 对我起了作用。 - Joe Hawkins

Answer 2

我正在尝试找到一种让Webstorm/Intellij在调试模式下监听TS文件变化并重新启动服务器的方法。看起来ts-node-dev比nodemon更快，因为它在重新启动之间共享了Typescript编译过程。

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

然后在您的运行/调试配置中，添加一个具有以下参数的node.js配置：

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

应用程序参数 ---> --respawn -- src/script/local.server.ts

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

如果您恰好是使用aws lambda进行开发，我还包装了一个小型库。

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

- LeOn - Han Li

---

我来晚了。根据你提供的信息，我设法让调试“工作”了。也就是说，启用“在第一行处中断”后，它确实会在index.js中中断。但是，如果我从浏览器运行EP调用，则无法到达断点。有什么建议吗？ - Erythros

@Erythros，你所说的“EP”调用是什么意思？一旦你在WebStore中运行调试，只要在tsconfig.json中配置了源映射，就可以在xxx.ts中设置断点。因为ts-node-dev正在监视更改并重新编译和重新生成，所以它还应该在更改时进行“实时重新加载”。 - LeOn - Han Li

Answer 3

我想补充一下我的做法，使用Webstorm 2021.1.1

我发现最简单的方法是进入你的package.json，右键点击你想运行的npm脚本旁边的绿色三角形，然后选择debug。

我能够在我的typescript代码中应用断点，并且它完美地工作。由于我来自.Net，那里调试总是非常直接明了，所以我很高兴看到Webstorm也变得同样简单。

这是我选择要调试的npm脚本。

"dev": "env-cmd -f ./config/dev.env concurrently -k -n COMPILER,NODEMON -c gray,blue \"tsc -w\" \"nodemon -w dist dist/index.js\"",

- Petey

Answer 4

在使用Webstorm/IntelliJ调试Node.js项目时，使用TypeScript并不需要太多的调试工作。

你应该确保在你的tsconfig.json中启用了源映射：

//tsconfig.json
{
  "compilerOptions": {
    ...,
    "sourceMap": true,
    ...
  }
}

为了让您能够直接在TypeScript文件中设置断点，需要使用源代码映射。

然后，您应该记住使用Node选项--inspect或--inspect-brk。我建议在大多数情况下使用inspect-brk，因为它会在Node启动并运行后暂停执行。

您可以在package.json中添加简单的脚本来运行您的TypeScript Node应用程序，例如使用ts-node。

//package.json
{
  "scripts": {
    "dev-debug": "ts-node --inspect-brk src/index.ts" 
  }
}

使用pnpm|yarn|npm包管理器运行该命令：

#shell
pnpm run dev-debug

然后在你的shell中，你会得到一个漂亮的URL，像这样：ws://127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e，你可以用它来连接到你的调试器。

在WebStorm/IntelliJ中，你只需按住键盘上的相应按键并点击它：

⇧ + ⌘ + 点击

Ctrl + Shift + 点击

按键取决于你的操作系统。

之后，你将在IDE中启动并运行你的调试器。

- Igor W.

Answer 5

我正在使用一个名为ts-node的特定版本的Node。

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

请注意保留HTML标签。

"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。

- Nicolas Zozol

Answer 6

为了在WebStorm(2017.2.3)中运行TypeScript源代码调试器，我进行了以下操作:

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

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

所有源TS文件位于"./app"文件夹中，所有编译后的文件位于./dist文件夹中。最重要的源文件选项是sourceRoot，填写错误的值不会指向TS文件。

通过sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' }我将我的.map文件与.js文件放在一起，并引用app文件夹。我不需要.map文件中的内容，因为已经有了 (app文件夹)。

感谢@Ekaterina帮助我使用TypeScript运行Node调试。

- Pencroff

Answer 7

创建一个带有“build”和“start”脚本的“package.json”文件：

//package.json

{
...
"scripts": {
    "start": "npm run build && node ./dist/index.js",
    "build": "webpack --config ./webpack.config.js",
...
}

在这个配置中，所有编译后的文件都位于dist/目录下。入口点是index.js。

确保你的tsconfig.json文件中启用了sourceMap选项。

//tsconfig.json

{
...
    "compilerOptions": {
        "sourceMap": true
    }
...
}

在你的webpack.config.js文件中，确保你有以下所示的属性：

//webpack.config.js

module.exports = {
    mode: 'development', // This is important!, if you set 'production' it won't let you debug
    devtool: 'source-map',
    ...
}

最后，按照以下步骤设置你的WebStorm 运行/调试配置：

...
package.json: ~/path/to/your/package.json
Command: run
Scripts: start
...

现在添加一个断点并开始调试

- Sidonai