升级至Angular12后Chrome DevTools断点不触发该如何排查？

• 排查angular.json构建配置
  定位到projects -> 你的项目名 -> architect -> build -> options节点，检查sourceMap属性是否设置为true；Angular12开始默认区分production/development构建配置，需同步确认configurations下的development节点没有覆盖sourceMap为false，且ng serve默认使用的是development配置。
• 排查自定义Webpack及webpack-dev-server配置
  如果项目使用了自定义Webpack配置（含@angular-builders/custom-webpack扩展配置），检查devtool属性是否设置为开发环境适用的eval-source-map/source-map，不要设置为none或生产环境用的hidden-source-map等选项。同时排查webpack-dev-server配置是否开启了代码压缩，不要在开发环境开启代码压缩和混淆配置，压缩会破坏源码和编译后代码的映射关系。
• 检查依赖版本匹配性
  Angular12对应的@angular-devkit/build-angular等构建相关依赖版本需要和Angular核心包版本对齐，新增的webpack-dev-server如果和构建依赖要求的版本冲突也会导致sourcemap生成异常。可删除node_modules、package-lock.json/yarn.lock后重新执行安装命令，修复版本冲突问题。
• 核对启动命令参数
  检查package.json中scripts节点的start命令，确认ng serve没有附带--sourceMap false等关闭sourcemap的启动参数。
• 排除缓存及浏览器干扰
  停掉当前的ng serve进程，清除浏览器缓存后重新启动开发服务，也可以用Chrome隐身模式打开页面测试，排除浏览器插件、缓存的旧压缩脚本导致的断点失效问题。
• 确认DevTools配置
  打开Chrome DevTools设置页，确认Enable JavaScript source maps选项处于勾选状态，没有开启禁用JavaScript的相关配置。

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