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

zaq34kh6  于 7个月前  发布在  Storm
关注(0)|答案(6)|浏览(160)

与Visual Studio Code相比,你所需要做的就是允许源代码Map,VSCode将调试TypeScript,但我不能在WebStorm上实现同样的功能。
我可以在WebStorm中轻松调试服务器端的JavaScript,但不能调试TypeScript

gc0ot86w

gc0ot86w1#

对于其他在WebStorm/IDEA中调试TypeScript的人来说,我也有类似的挫折感(可能是出于不同的原因)。我的问题只是我没有在节点运行配置中将工作目录设置为dist文件夹。我在Jest中运行测试,并假设工作目录应该是我项目的根目录。将其设置为dist,调试开始工作!
更多信息…
src中的源.ts文件
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
希望能帮上忙!

lmyy7pcs

lmyy7pcs2#

我试图找到一种方法,让Webstorm/Intellij在调试模式下观察TS文件的变化并重新启动服务器。看起来像ts-node-dev,IHMO在live-reload方面比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

ifsvaxew

ifsvaxew3#

只是想添加什么为我工作与Webstorm 2021.1.1
我发现最简单的方法是进入你的package.json,右键点击你想运行的npm脚本旁边的绿色三角形,然后选择debug。
我能够将断点应用到我的打字脚本代码中,它工作得很完美。来自.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\"",
9rbhqvlz

9rbhqvlz4#

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

首先在package.json文件中添加:

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

运行npm installnode_module/.bin/目录将包含Windows所需的ts-nodets-node.cmd
显然这些版本会移动。你可以在ts-node项目的package.json中看到他们使用的 typescript 版本尽可能接近。
然后你可以添加断点。我看到的唯一缺点是,你必须在配置中定义JavaScript文件(这是一个ts文件),而不仅仅是右键单击+运行。
如果出现xyz is not a function错误,请检查tsconfig.json文件是否没有"noEmit": false,

h22fl7wq

h22fl7wq5#

为了在typescript源周围运行WebStorm(2017.2.3)调试器,我做了:

  • 设置Node.js配置:
  • 工作目录:root/of/the/project(我的package.json所在的位置)
  • JavaScript文件:dist/index.js
  • 我用gulp-typescript编译我的TypeScript,但更重要的是源Map文件。因此,编译使用的任务如下:
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 debug。

ffx8fchx

ffx8fchx6#

在使用Webstorm/IntelliJ时,使用TypeScript调试Node.js项目并不需要太多。
您应该确保在tsconfig.json中启用了源Map:

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

需要源Map来允许您直接在TypeScript文件中设置断点。
然后你应该记得使用Node选项--inspect--inspect-brk。我建议在大多数情况下使用inspect-brk,因为这个选项会在Node启动并运行后暂停执行。
您可以添加简单的脚本来运行TypeScript Node应用程序,例如在package.json中使用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中启动并运行调试器。

相关问题