VSCode+Chrome调试Angular出现Unbound breakpoint 试过现有方案失效如何解决

• 修正launch.json配置错误
  你当前配置存在两处核心不匹配问题：
  1. 端口不匹配：angular.json中serve默认端口为4290，但launch.json中url写的是4200，直接修改url为http://localhost:4290
  2. webRoot路径错误：Angular源码存放在src目录下，将"webRoot": "${workspaceRoot}"修改为"webRoot": "${workspaceFolder}/src"，同时把已废弃的${workspaceRoot}变量替换为官方推荐的${workspaceFolder}
  3. 新增源映射路径匹配规则，适配Angular webpack打包的源映射结构
     修正后的完整launch.json配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4290",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    }
  ]
}

• 确认开发构建配置生效
  启动本地服务时明确指定开发配置，确保sourceMap正常生成：
  ng serve --configuration development
  你当前angular.json的development配置下sourceMap为true，该项无需修改。

• 清除构建缓存
  删除本地缓存文件，避免旧的源映射文件干扰：

1. 删除项目根目录下的.angular缓存文件夹
2. 删除node_modules/.cache文件夹
3. 重启本地开发服务后再启动调试

• 验证源映射有效性
  启动服务后打开Chrome开发者工具，进入「Sources」面板，查找webpack://下的src目录，找到对应ts文件手动打断点，若能正常命中说明源映射生成正常，问题出在VSCode配置；若无法命中，检查tsconfig.app.json中是否开启了sourceMap：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true
  }
}

• 排查VSCode调试配置

1. 打开VSCode设置，搜索debug.allowBreakpointsEverywhere，将该项设置为true
2. 确认VSCode自带的「JavaScript Debugger」扩展处于启用状态，无需额外安装旧版「Debugger for Chrome」扩展
3. 若开启了工作区的路径别名，需同步在sourceMapPathOverrides中添加对应映射规则

• 排除其他干扰项

1. 开发环境下关闭serviceWorker，避免缓存旧代码导致断点不匹配，你当前仅生产/qas环境开启了serviceWorker，若开发调试时切换过环境配置，需清空浏览器缓存
2. 关闭Chrome的代码压缩相关插件，避免修改运行时代码导致源映射不匹配

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