VS Code调试TypeScript Serverless项目时断点跳转至编译后文件问题求助

云原生阿岚

2026-10-4

问题排查与解决步骤

修正tsconfig.json的sourceRoot配置
你当前配置中sourceRoot: "/"会强制调试器到系统根路径查找TS源文件，和实际项目路径不匹配，是导致断点跳转到JS的核心诱因之一。直接删除这行配置即可，TS编译器会自动根据项目结构生成正确的相对路径源映射。

调整.vscode/launch.json调试配置
在现有配置中新增以下两个字段，解决别名路径和源映射匹配问题：

"sourceMapPathOverrides": {
  "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
  "webpack:////*": "/*",
  "webpack://?:*/*": "${workspaceFolder}/*",
  "webpack:///./src/*": "${workspaceFolder}/src/*",
  "@src/*": "${workspaceFolder}/src/*"
},
"resolveSourceMapLocations": [
  "${workspaceFolder}/**",
  "!**/node_modules/**"
]

如果你的serverless offline打包输出路径不是.webpack，可以同步调整outFiles字段的匹配规则。

校验Serverless插件源映射生成逻辑
检查serverless.yml中的serverless-webpack配置，确保开启了源映射输出：
```
custom:
  webpack:
    webpackConfig: ./webpack.config.js
    includeModules: true
    packager: npm
    keepOutputDirectory: true
```
同时确认你的webpack.config.js中配置了devtool: 'source-map'，保证打包时生成正确的源映射文件。
过滤非业务调用栈
新版VS Code调试器默认会展示所有Node内部进程调用栈，你可以在launch.json中添加"smartStep": true配置，自动跳过没有源映射的代码（比如Node内部逻辑、child process helper逻辑），调用栈就只会展示你的业务TS文件链路。
生效验证
所有配置修改完成后，删除.webpack、.serverless等缓存目录，重启VS Code后重新启动调试即可验证断点是否正常命中TS源文件。