Angular 8升级至15后浏览器DevTools调试器失效求助

一、修复依赖版本不匹配问题 #

从你的package.json可以看到多个依赖版本与Angular 15不兼容，这可能导致sourceMap生成异常：

• 升级@angular/service-worker至^15.1.0，当前版本为~8.0.0
• 升级@angular/language-service至^15.1.0，当前版本为~8.0.0
• 升级@ngrx/store至^15.0.0（Angular 15对应版本），当前版本^7.4.0版本差距过大
• 升级rxjs至~7.5.0及以上，Angular 15要求依赖rxjs^7.5.0，当前版本为~6.4.0
• 升级第三方ngx类依赖至兼容Angular 15的版本：
  • ngx-bootstrap需升级至^10.0.0（5.x版本仅兼容Angular 12-14）
  • ngx-mask需升级至^15.0.0
  • 其他如ngx-infinite-scroll、ngx-skeleton-loader等也需确认对应Angular 15的适配版本

二、检查构建配置（angular.json） #

确保开发模式下sourceMap相关配置正确：

• 找到projects -> [你的项目名] -> architect -> build -> configurations -> development，确认：

  "sourceMap": true,
  "buildOptimizer": false,
  "aot": false,
  "optimization": false
  

• 确认serve配置继承了上述development配置

三、清理缓存并重新构建 #

执行以下步骤彻底清理缓存后重新启动项目：

1. 运行ng clean清理Angular CLI缓存
2. 删除本地node_modules文件夹和package-lock.json文件
3. 运行npm install重新安装依赖
4. 运行ng serve启动开发服务器

四、检查浏览器调试器设置 #

• 打开浏览器DevTools的Sources面板，确认Enable JavaScript source maps选项已勾选（Chrome路径：Sources面板右上角设置图标 → 勾选该选项）
• 勾选Network面板的Disable cache选项，避免加载旧的缓存文件
• 在Sources面板中查找你的.ts源文件，确认能正常找到并打开，若找不到则说明sourceMap未生成或路径映射错误

五、检查tsconfig.json配置 #

确认tsconfig.json的compilerOptions中开启sourceMap：

"compilerOptions": {
  "sourceMap": true,
  "target": "ES2020", // Angular 15推荐目标版本
  // 其他配置...
}

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