Angular应用打开Network标签刷新后请求冻结问题求助

可能的原因 #

• 未正确终止的HTTP请求：Angular 15对HttpClient的订阅管理有更严格的隐性要求，若组件/服务中的HTTP请求（尤其是流式响应、SSE这类长连接）在页面刷新前未取消订阅，浏览器Network标签会持续等待请求完成，导致界面冻结。
• DevTools扩展冲突：Angular DevTools浏览器扩展与Chrome原生Network标签存在兼容性问题，升级后这种冲突可能被触发，干扰请求追踪逻辑。
• Zone.js版本不兼容：Angular 15配套的Zone.js版本更新后，部分异步操作未被Zone正确包裹，导致浏览器无法识别请求状态变化，出现假挂起。
• Service Worker缓存异常：若应用启用了Service Worker，升级后缓存策略配置错误，刷新时Service Worker后台处理缓存请求未正常完成，阻塞Network标签的状态更新。

调试步骤 #

• 排查挂起请求：刷新前先检查Network标签是否有长期处于pending状态的请求，对应代码中确认请求订阅是否在组件销毁/路由跳转时通过takeUntil+销毁Subject、async管道等方式正确取消。
• 禁用Angular DevTools：暂时关闭浏览器的Angular DevTools扩展，重复刷新操作，验证是否是扩展导致的冲突。
• 更新Zone.js：查看package.json中zone.js版本，Angular 15推荐使用~0.12.0版本，执行npm install zone.js@~0.12.0更新，清除node_modules后重新安装依赖。
• 临时禁用Service Worker：在Chrome DevTools的Application标签中，找到Service Worker并点击Unregister，同时清空缓存，再测试刷新情况。
• 开启禁用缓存选项：在Network标签勾选Disable Cache，刷新页面排除缓存相关的异常阻塞。
• 检查HTTP拦截器：排查自定义HTTP拦截器逻辑，确保所有请求都正确调用next.handle(req)，无阻塞性的异步操作未正确处理的情况。
• Performance录制分析：刷新前开启Chrome DevTools的Performance录制，直到Network标签冻结后停止录制，查看是否有长期运行的任务或异常异步操作，定位问题节点。

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