Ionic5+Angular12+Cordova项目chrome://inspect调试找不到webpack://文件夹问询

• Angular 12及以上版本默认调整了开发环境的source map生成规则，@angular-devkit/build-angular 12.x版本默认关闭了vendor源映射输出，热重载模式下未生成webpack对应的源映射文件，导致Chrome DevTools无法识别出webpack://目录。
• 项目的angular.json、tsconfig.json配置中的source map相关参数被修改为关闭状态，也会导致该问题。

1. 修改angular.json配置
   打开项目根目录的angular.json文件，依次找到 projects > 你的项目名称 > architect > serve > options 节点，添加/修改如下配置：

"sourceMap": {
  "scripts": true,
  "styles": true,
  "vendor": true
}

如果生产构建场景也需要调试，在build的options下添加上述配置即可。

2. 校验tsconfig配置
   打开项目根目录的tsconfig.json，确认compilerOptions下的sourceMap字段值为true：

{
  "compilerOptions": {
    "sourceMap": true,
    // 其他原有配置保留
  }
}

3. 清理缓存并重启服务
   依次执行如下操作：

• 删除项目根目录下的.angular缓存文件夹、node_modules文件夹、package-lock.json文件
• 执行npm install重新安装依赖
• 执行启动命令时可额外传入source map参数确保生效：
  ionic cordova run android -l -- --source-map=true

4. 验证效果
   启动应用后打开chrome://inspect进入调试页，Sources标签页即可正常显示webpack://文件夹，可正常调试源码。

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