如何在 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

我正在使用名為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 。

顯然這些版本會移動。 您可能會在ts-node項目的package.json中看到他們使用的打字稿版本盡可能接近。

然后你可以添加斷點。 我看到的唯一缺點是您必須在配置中定義 Javascript 文件（這是一個 ts 文件），而不僅僅是右鍵單擊 + 運行。

如果您有xyz is not a function錯誤，請檢查您的tsconfig.json文件是否沒有"noEmit": false,

Answer 3

試圖找到一種方法讓 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進行開發，我會為此aws lambda一個小型庫

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

Answer 4

為了圍繞打字稿源運行 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' }我正在.js文件旁邊編寫我的.map文件並引用app文件夾。我不需要.map文件中的內容，因為它已經存在（ app文件夾）。

感謝@Ekaterina，我能夠使用 Typescript 運行 Node 調試。

Answer 5

只想添加對我有用的 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\"",