如何在 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 配置（在

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 2021.1.1 对我有用的内容

我发现最简单的方法是转到 package.json 并右键单击要运行的 npm 脚本旁边的绿色三角形。然后选择调试。

我能够将断点应用到我的打字稿代码中，并且它工作得很好。来自 .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\"",

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,

Answer 5

为了围绕打字稿源运行 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')),
     ]);
   });
   

所有源 TS 文件位于 './app' 文件夹中，所有编译文件位于

./dist

文件夹中。最重要的源文件选项

sourceRoot

，错误的值不会带你到ts文件。

通过

sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' }

我正在将

.map

文件写在

.js

文件旁边，并引用

app

文件夹。我不需要

.map

文件中的内容，因为它已经存在（

app

文件夹）。

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

Answer 6

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

您应该确保您已在

tsconfig.json

中启用源映射：

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

需要源映射才能允许您直接在 TypeScript 文件中设置断点。

那么你应该记住使用节点选项

--inspect

或

--inspect-brk

。我建议在大多数情况下使用

inspect-brk

，因为一旦 Node 启动并运行，它就会暂停执行。

您可以使用例如添加简单的脚本来运行您的 TypeScript Node 应用程序。

package.json

:

中的 ts 节点

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

并使用

pnpm|yarn|npm

包管理器运行它：

#shell
pnpm run dev-debug

然后在你的 shell 中你会得到像

ws://127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e

这样的漂亮 URL，你可以用它来附加到你的调试器。

要在 WebStorm/IntelliJ 中执行此操作，您只需按下按键即可单击它：

⇧ + ⌘ + 单击

Ctrl + Shift + 单击

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

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

🎉