VS Code调试TypeScript显示转译变量名而非原名的配置问题

根据你描述的情况：你已经配置了tsconfig.json和VS Code的launch.json，并且通过将require('source-map-support').install();移到第一个导入解决了CLI运行时栈追踪指向JS文件的问题，但VS Code调试时仍然看不到原始变量名（比如本该显示conn却显示exports.conn），接下来我给你一步步的解决方案：

1. 确认TypeScript编译配置的正确性 #

你当前的tsconfig.json中已经设置了"sourceMap": true，这是生成source map的关键，不过可以再检查以下几点：

• 确保没有设置inlineSourceMap或inlineSources（这两个选项会把source map嵌入到JS文件中，可能影响VS Code的解析），你的配置里没有这些，没问题。
• 确认outDir是"dist"，编译后的JS和对应的.map文件都应该生成在这个目录下，调试前可以手动清理dist目录重新编译，避免旧文件干扰。

2. 调整VS Code的launch.json配置 #

你的当前launch.json缺少几个关键的source map相关配置，修改后的配置如下：

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.ts",
  "console": "integratedTerminal",
  "outFiles": ["${workspaceFolder}/dist/**/*"],
  "sourceMaps": true,
  "resolveSourceMapLocations": ["${workspaceFolder}/dist/**/*", "!**/node_modules/**"],
  "preLaunchTask": "tsc: build - tsconfig.json"
}

各选项的作用：

• "sourceMaps": true：明确告诉VS Code启用source map支持，这是让调试器映射到原始TS文件的核心设置。
• "resolveSourceMapLocations"：指定VS Code查找source map文件的位置，同时排除node_modules目录，避免无关的source map干扰。
• "preLaunchTask"：设置调试前自动执行TypeScript编译任务，确保dist目录下的文件是最新的，避免使用旧的编译产物导致变量名不匹配。

3. 验证调试环境 #

完成配置修改后，按以下步骤验证：

• 执行Ctrl+Shift+B（Windows/Linux）或Cmd+Shift+B（Mac），选择tsc: build - tsconfig.json手动编译一次，确认dist目录下每个JS文件都有对应的.map文件。
• 重启VS Code，清除调试缓存（可以通过关闭调试面板后重新启动调试来实现）。
• 再次启动调试，检查变量面板是否显示原始的TS变量名。

如果问题仍然存在，可以尝试：

• 更新VS Code的Node.js调试插件（在扩展面板中搜索Node.js Debug并更新）。
• 检查是否有其他插件干扰调试，暂时禁用无关插件再测试。

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