Express+TypeScript项目VSCode调试器无法关联TS源码断点求助

1. 开启TypeScript SourceMap生成 #

TS源码断点能映射到编译后的JS，必须依赖sourcemap文件。检查你的tsconfig.json（如果没有就执行tsc --init生成），确保以下配置正确：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist", // 与当前项目编译产物目录保持一致
    "rootDir": "./src", // 你的TS源码根目录，根据实际项目结构调整
    "sourceMap": true, // 必须开启，生成.map映射文件
    "inlineSourceMap": false,
    "inlineSources": false,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"], // 确保包含所有TS源码文件
  "exclude": ["node_modules", "dist"]
}

2. 调整package.json的开发脚本 #

给nodemon启动命令添加调试监听参数，同时保留原有编译监听逻辑：

{
  "scripts": {
    "dev": "concurrently \"yarn tsc --watch\" \"yarn tsc-alias --watch\" \"nodemon --inspect=9229 -q dist/index.js\""
  }
}

这里用--inspect=9229替代--inspect-brk，避免每次启动都强制暂停在第一行；如果需要调试启动初始化逻辑，保留--inspect-brk也可。

3. 更新VSCode的launch.json配置 #

修改调试配置，明确指定sourcemap路径和编译产物路径，确保VSCode能正确关联TS源码：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Nodemon (TS)",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true,
      "protocol": "inspector",
      "cwd": "${workspaceFolder}", // 若后端代码在backend子目录，改为${workspaceFolder}/backend
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/dist/**/*.js"], // 指向编译后的JS文件
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

4. 调试流程 #

1. 执行yarn dev启动开发服务
2. 在VSCode调试面板选择Attach to Nodemon (TS)配置，点击启动调试
3. 在TS源码文件中设置断点，发起请求后即可命中TS源码断点

注意事项 #

• 确保rootDir和outDir的对应关系正确，编译后的JS文件与sourcemap文件需在dist目录下对应TS源码的结构
• 若断点仍不生效，检查VSCode左下角状态栏，确认当前调试会话的sourcemap状态是否正常
• 直接在TS源码中设置断点，无需在编译后的JS文件中操作

内容的提问来源于stack exchange，提问作者GrowUpAnand