VS Code中因嵌入路径导致Source Maps无法识别，如何配置解决？

根据你的描述，问题核心在于生成的Source Map中sources字段的路径格式，和VS Code调试器的路径解析逻辑不匹配——Chrome能自动兼容相对路径，但VS Code需要更精准的映射规则。以下是具体的配置修改方案：

1. 调整Gulp中Source Map的生成规则 #

在你的gulpfile.js里，修改sourcemaps.write的配置，通过mapSources函数把sources里的完整路径简化为仅保留文件名（和你手动修改后的效果一致）：

tsResult.js.pipe(sourcemaps.write(".", {
  includeContent: true,
  mapSources: function(sourcePath) {
    // 提取路径中的文件名，去掉前面的目录层级
    return sourcePath.split('/').pop();
  }
}))

这个函数会自动把sources字段里的app/lib/_common/equipment/components/equipment-selection/equipmentSelection.component.ts转换为equipmentSelection.component.ts，让VS Code能直接在webRoot目录下匹配到对应的TS文件。

2. 优化tsconfig.json的路径配置 #

你的tsconfig.json中rootDir设为./可能会让TypeScript生成的路径包含过多冗余层级，建议将其调整为TS文件的实际根目录./app，这样生成的Source Map路径会更简洁：

{
  "compilerOptions": {
    "rootDir": "./app/", // 修改为app目录，对应TS文件的根路径
    "sourceRoot": "./", // 保持相对当前工作目录
    // 其他配置保持不变...
  }
}

同时确保inlineSourceMap始终为false，因为你需要生成独立的Source Map文件而非内嵌到JS中。

3. 验证launch.json的webRoot配置 #

你的launch.json中webRoot设置为${workspaceRoot}\\app是正确的，但可以换成VS Code更推荐的新语法${workspaceFolder}，同时统一使用正斜杠适配跨平台：

{
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}/app"
    }
  ]
}

问题根源说明 #

VS Code调试器会根据webRoot和Source Map中的sources路径拼接查找TS文件。当sources包含完整相对路径时，若路径层级和实际文件结构因Gulp编译逻辑产生偏差，就会出现找不到文件的情况；而仅保留文件名时，VS Code会在webRoot及其子目录中搜索同名文件，从而成功匹配断点。

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