构建PWA后Chrome、Brave打开开发者工具刷新页面断开报错

该报错为Chromium内核（Chrome、Brave均基于该内核）的已知兼容性问题，多由Lighthouse扫描后残留的Service Worker缓存、DevTools源映射加载逻辑冲突导致，可按以下步骤排查解决：

1. 清理站点本地存储与Service Worker #

• 打开当前站点的开发者工具，切换到*应用（Application）*标签页
• 左侧导航栏找到Service Workers选项，点击查看所有，找到对应站点的服务工作进程条目，点击注销
• 回到应用标签页的存储板块，勾选所有缓存选项（含Cookie、Cache Storage、IndexedDB等），点击清除站点数据
• 完全关闭浏览器后重新打开，访问页面测试是否正常

2. 临时禁用DevTools源映射 #

该报错直接关联过期非JS模块的源映射调用，关闭源映射可快速规避问题：

• 打开DevTools，点击右上角齿轮图标进入设置页
• 在*实验性（Experiments）*分类下，取消勾选JavaScript source maps和CSS source maps
• 重启DevTools后测试刷新是否正常

3. 重置Lighthouse运行配置 #

如果问题仅在运行Lighthouse后出现，清理Lighthouse临时痕迹：

• 打开DevTools的Lighthouse标签页，点击右上角重置按钮还原配置
• 关闭所有当前站点的标签页，重新打开访问测试

4. 排查PWA构建配置 #

如果上述客户端操作无效，检查项目打包配置：

• 确认webpack/vite等构建工具的输出配置，没有将图片、样式、字体等非JS资源错误标记为module类型输出
• 检查Service Worker注册逻辑，确认开发环境下没有重复注册、或者异常的资源拦截缓存规则
• 清理manifest.json中的废弃字段，重新构建后部署测试

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