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

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

更多信息...

源 .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 配置 （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

希望对你有所帮助！

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

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

2. 我正在用 编译我的 TypeScript，但更重要的是源映射文件。所以用于编译的任务如下：gulp-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”文件夹中，所有编译文件都位于文件夹中。最重要的源文件选项，错误的值不会带您进入ts文件。./distsourceRoot

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

多亏了@Ekaterina我才能够使用 Typescript 运行 Node 调试。

我正在使用一个名为 .ts-node

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

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

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

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

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

如果您遇到错误，请检查您的文件是否没有xyz is not a functiontsconfig.json"noEmit": false,

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

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

然后在 你的 中，添加一个包含以下参数的配置：Run/Debug Configurationnode.js

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

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

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

我为此打包了一个小型库，如果你碰巧使用aws lambda

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

只想添加对 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\"",

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

您应该确保已在以下位置启用源映射：tsconfig.json

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

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

然后你应该记得使用节点选项或.我建议在大多数情况下使用，因为一旦 Node 启动并运行，它就会暂停执行。--inspect--inspect-brkinspect-brk

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

//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 中启动并运行。

创建一个 和 脚本：package.jsonbuildstart

//package.json

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

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

确保您已启用该选项：tsconfig.jsonsourceMap

//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：Run/Debug Configuration

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

现在添加断点并开始调试