如何在VSCode中调试Angular多项目工作区（Chrome调试器）

我之前在迁移到Angular多项目工作区后，也碰到过完全一样的断点未绑定问题，折腾了好一阵子才找到可行的解决办法，咱们一步步来排查修复：

1. 先确认Angular项目的构建源映射配置 #

首先要确保你目标项目的angular.json里已经正确开启了sourcemap，而且配置没有问题。找到对应项目（比如my-app）的architect > build > options部分，检查sourceMap的设置：

"architect": {
  "build": {
    "options": {
      "sourceMap": {
        "scripts": true,
        "styles": true,
        "hidden": false,
        "vendor": true
      },
      // 其他配置...
    }
  }
}

如果sourceMap只是设为true也可以，但展开子选项能确保所有类型的源码都生成对应的sourcemap，避免遗漏。

2. 精准调整launch.json的sourceMapPathOverrides #

你的现有配置可能路径映射不够精准，因为Angular多项目编译时，webpack生成的sourcemap里会带上项目名称前缀。建议把sourceMapPathOverrides改成下面这样（记得把my-app替换成你的实际项目名）：

{
    "name": "Launch my-app in Chrome against localhost (with sourcemaps)",
    "type": "pwa-chrome", // 注意这里换成新的pwa-chrome调试器
    "request": "launch",
    "runtimeExecutable": "/usr/bin/chromium-browser",
    "runtimeArgs": [ "--disable-extensions" ],
    "url": "http://localhost:4200", // 确保和ng serve的端口一致
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true,
    "sourceMapPathOverrides": {
        "webpack://my-app/./src/*": "${webRoot}/projects/my-app/src/*",
        "webpack://my-app/*": "${webRoot}/projects/my-app/*",
        "webpack:///./src/*": "${webRoot}/projects/my-app/src/*",
        "webpack:///src/*": "${webRoot}/projects/my-app/src/*",
        "webpack:///*": "${webRoot}/*",
        "webpack:///~/*": "${webRoot}/node_modules/*"
    }
}

这里的关键是添加了带项目名称的webpack://my-app/./src/*映射——多项目编译时，webpack会把项目名作为路径前缀，旧的配置可能匹配不到这个前缀，导致断点无法绑定。另外，把type改成pwa-chrome，这是VSCode官方现在推荐的调试器，对现代前端框架（包括Angular）的支持更好，老的chrome调试器已经逐步被淘汰了。

3. 确认启动配置的一致性 #

• 确保url里的端口和你启动项目时用的端口一致：如果你启动项目用的是ng serve my-app --port 4201，那url就要改成http://localhost:4201。
• 确认webRoot确实是${workspaceFolder}，也就是包含angular.json的那个根目录，不要指向项目子目录。

4. 清理缓存并重新构建 #

旧的sourcemap或者编译缓存可能会干扰调试，执行以下步骤：

• 关闭VSCode的所有调试会话
• 在终端运行ng build my-app --delete-output-path，彻底删除项目的dist文件夹
• 然后用ng serve my-app --source-map重新启动项目，确保生成全新的sourcemap
• 再重新启动VSCode的调试会话

5. 检查插件和VSCode版本 #

• 卸载旧的Debugger for Chrome插件，现在VSCode内置的JavaScript Debugger已经完全支持Chrome调试，而且兼容性更好
• 确保VSCode是最新版本，避免版本兼容问题

按照上面的步骤一步步来，应该就能解决断点未绑定的问题了。

内容的提问来源于stack exchange，提问作者BuZZ-dEE