Angular开发中VS Code调试器无法命中断点问题求助

• 清理Angular构建缓存
  运行以下命令清理缓存后重新构建项目：

  ng clean
  ng build
  

  长时间未使用项目，旧的构建缓存可能导致源码映射与实际编译代码不匹配，引发断点偏移或不命中。

• 更新VS Code及调试插件
  确保VS Code为最新版本，同时更新Debugger for Microsoft Edge（兼容Chrome调试）插件，旧版本插件可能与当前Angular版本存在兼容性问题。

• 调整launch.json配置
  明确开启sourceMaps，并可临时开启trace生成调试日志排查问题：

  "version": "0.2.0",
  "configurations": [
      {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome against localhost",
          "url": "http://localhost:4200",
          "webRoot": "${workspaceFolder}",
          "skipFiles": [
              "${workspaceFolder}/node_modules/**/*.js",
              "${workspaceFolder}/node_modules/**/*.mjs"
          ],
          "sourceMaps": true,
          "trace": true
      }
  ]
  

  调试完成后记得关闭trace配置，避免生成过多日志。

• 确认Angular源码映射配置
  打开angular.json，检查开发环境的sourceMap是否开启：

  "architect": {
    "build": {
      "configurations": {
        "development": {
          "sourceMap": true,
          // 其他配置
        }
      }
    }
  }
  

  若调试生产构建，需确保对应环境的sourceMap也处于开启状态。

• 清理浏览器缓存
  打开Chrome开发者工具，在Network面板勾选Disable cache，或直接通过Ctrl+Shift+Delete清理浏览器缓存，避免旧的编译资源干扰调试。

• 排查编译优化导致的偏移
  尝试禁用AOT编译启动项目：

  ng serve --aot=false
  

  若断点恢复正常，说明AOT编译的代码精简操作导致了行号偏移，需进一步排查Angular的编译优化配置。

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