Angular 8升级至12后Chrome开发者工具webpack:\\文件夹不显示如何解决

• 修正angular.json的sourceMap完整配置
  Angular 12起sourceMap支持精细化配置，仅设置布尔值true可能无法生成完整的脚本映射，需在angular.json对应项目的build > configurations > development节点下按如下配置：

  {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
    },
    "namedChunks": true
  }
  

  同时确认serve节点的defaultConfiguration设为development，避免启动时默认加载生产配置。
• 验证Chrome开发者工具配置
  打开DevTools设置页，在Sources分类下确认Enable JavaScript source maps、Enable CSS source maps两个选项已勾选。
• 清理Angular CLI缓存
  版本升级后残留缓存会导致配置不生效，执行以下命令清理缓存后重启服务：
  ng cache clean && ng serve
• 检查自定义webpack配置
  若项目使用了@angular-builders/custom-webpack自定义构建逻辑，需确认webpack配置中的devtool属性未被覆盖为hidden-source-map或none，需设置为eval-source-map才可显示webpack:\路径的源码映射。
• 确认启动命令参数
  不要在启动命令中附带生产环境参数，避免生成无映射的生产包，推荐直接使用ng serve --configuration development启动开发服务。

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