You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让WebStorm通过ts-node结合node --inspect命中正确代码行?

解决TypeScript + Express + nodemon调试时WebStorm断点行不匹配的问题

看起来你遇到的是调试时source map映射错位的问题,这在TS转JS的调试场景里太常见了,我来帮你一步步排查解决:

第一步:完善你的tsconfig.json配置

你的tsconfig里已经开启了sourceMap: true,这是基础,但还有几个关键配置要补全或确认:

  • 必须明确outDir字段,指定编译后JS文件的输出目录(比如"./dist"),这样TS编译器会在对应目录生成配套的.js.map文件
  • 不要开启inlineSourceMap(如果有这个配置的话),内联source map经常会导致WebStorm解析异常
  • 建议添加sourceRoot,指向你的TS源码根目录(比如"./src"),帮助调试器更精准地定位源码

完善后的tsconfig示例:

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es2017"],
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noResolve": false,
    "noEmitOnError": false,
    "noImplicitAny": true,
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
    "sourceRoot": "./src",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

第二步:调整nodemon的启动命令

要确保nodemon的启动逻辑和TS编译流程匹配,避免source map和运行的JS文件不对应:

方案1:用ts-node直接运行(快速但适合开发阶段)

nodemon --inspect=0.0.0.0:9229 -r ts-node/register src/index.ts

这个命令会让nodemon监听TS源码变化,通过ts-node实时编译并启动,同时传递--inspect开启调试端口。

方案2:先编译再运行(更稳定,适合复杂项目)

先在package.json里添加编译和启动脚本:

"scripts": {
  "build": "tsc -w",
  "dev": "nodemon --inspect=0.0.0.0:9229 dist/index.js",
  "start:dev": "concurrently \"npm run build\" \"npm run dev\""
}

然后安装concurrently来同时监听TS编译和nodemon启动:

npm install concurrently --save-dev

启动时直接运行npm run start:dev即可,这样TS会实时编译到dist目录,nodemon监听编译后的JS文件,调试端口也能正常开启。

第三步:配置WebStorm的调试会话

  1. 打开WebStorm的Run/Debug Configurations,新建一个Attach to Node.js/Chrome配置
  2. 在Configuration标签页:
    • 设置Host为localhost,Port为9229(和nodemon的--inspect端口保持一致)
    • 勾选Local files选项,确保WebStorm优先使用本地TS源码和生成的source map
  3. 切换到Source Maps标签页:
    • 确保Use source maps已勾选
    • 在Paths mappings里添加映射规则:把编译后的JS目录(比如dist/)映射到TS源码目录(比如src/)
    • 取消勾选JavaScript files下的Generated,避免调试时跳转到编译后的JS文件

第四步:验证并清理缓存

  • 检查outDir目录下,每个.js文件都对应有.js.map文件,打开其中一个.js.map,确认sources字段指向的是正确的TS源码路径(比如../src/index.ts)
  • 如果还是有问题,试试清除WebStorm的缓存:File > Invalidate Caches... > Invalidate and Restart,旧缓存有时候会导致source map映射异常

内容的提问来源于stack exchange,提问作者Jack Murphy

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.21 08:19:50