怎么在Chrome 120+断点调试前彻底关闭本地缓存？
功能定位：为什么调试前必须关缓存
在 Chrome 120 及更高版本，断点调试前彻底关闭本地缓存是避免“代码已改、页面仍跑旧逻辑”最直接的手段。DevTools 的 Disable cache 并非简单清存储，而是让当前标签在开发者工具开启期间完全跳过磁盘与内存缓存，确保 Network 面板里看到的每个资源都是实时回源。
经验性观察：如果仅用 Ctrl+F5 强制刷新，Service Worker 或内存缓存里的 JS 仍可能优先命中，断点会停在“幽灵旧行号”，导致单步结果与源码映射不一致。Disable cache 把这一隐患归零。
版本差异：120 之后的小改动
截至当前的最新版本，Disable cache 复选框仍在 Network 面板顶部，但图标从“圆箭头”改为“带斜杠的缓存”符号，鼠标悬停提示更明确：仅当 DevTools 保持打开时生效。关闭开发者工具或标签页后，缓存策略自动恢复，不影响日常浏览。
此外，Chrome 120 将“缓存禁用”状态写入会话隔离层，同一网站的多个标签可独立控制，避免旧版“全局开关”误伤其他调试窗口。
最短操作路径（桌面端）
- 打开待调试页面 → F12 或 Ctrl+Shift+I 唤起 DevTools。
- 切到 Network 面板 → 勾选第一行工具栏中的 Disable cache（图标为带斜杠的缓存）。
- 保持 DevTools 开启 → 按 F5 或 Ctrl+R 刷新，观察 Size 列出现“（from network）”即生效。
回退方案：取消勾选或关闭 DevTools 即可恢复默认缓存策略，无需重启浏览器。
移动端差异与远程调试
Android 真机远程调试：手机 Chrome 地址栏输入 chrome://inspect，点击对应设备 Inspect，打开的远程 DevTools 里同样可见 Disable cache 复选框，路径与桌面端一致。iOS 因系统限制，无法远程使用 Chrome DevTools，需依赖 Safari Web Inspector，其 Disable Caches 菜单位于 Developer 菜单，逻辑类似。
例外与取舍：哪些场景不该长期禁用
Disable cache 仅影响当前标签，但保持 DevTools 常驻会抬高约 5–10% 的内存占用（经验性观察，样本为 8 GB 笔记本开 10 个标签）。若调试 WebGL 大型纹理或流媒体，持续回源可能额外消耗数百兆流量。
工作假设：
对 CI 自动化测试，如果脚本未显式关闭缓存，可能因命中旧 WASM 二进制导致用例随机失败。此时应在 launcher flags 加 --disable-cache，而不是依赖手动勾选。
与 Service Worker 的协同陷阱
Disable cache 不会自动绕过 Service Worker 缓存。若 SW 把 JS 文件缓存进 CacheStorage，断点仍可能停在旧副本。建议：Application 面板 → Service Workers → 勾选 Update on reload，或点击 Unregister 后再刷新，双重保险。
验证：如何确认已彻底关闭
- Network 面板 → 刷新页面 → 所有主文档与脚本 Size 列显示“（from network）”且时间非 0 ms。
- Console 执行
performance.getEntriesByType('navigation')[0].transferSize如大于 0 即证明回源。 - 在 Sources 面板打断点，若行号与本地源码行号一致，说明映射正确。
常见故障排查表
| 现象 | 可能原因 | 验证与处置 |
|---|---|---|
| 刷新后仍显示 from disk cache | DevTools 被关闭 | 保持 DevTools 开启再刷新 |
| 断点停在空白行 | Source map 未更新 | Webpack 重新 dev build，再清 Application → Cache Storage |
| 手机远程调试无效 | USB 断线或版本过低 | 重新插线，手机 Chrome 升级至最新正式版 |
适用/不适用场景清单
- 适用：本地前后端联调、热更新脚本调试、Service Worker 迭代、性能基线对比前。
- 不适用：生产环境巡检、弱网 3G 测试（需真实缓存）、大规模自动压测（应使用 launcher flag）。
最佳实践 5 条
- 调试前一次性勾选 Disable cache，保持 DevTools 常驻，避免反复清存储。
- 与“Update on reload”配合使用，确保 SW 也重新安装。
- 调试完毕立即关闭 DevTools，释放内存并让缓存策略恢复。
- CI 场景改用命令行禁用缓存，避免依赖人工勾选。
- 对同一页面多标签调试，给每个标签独立窗口，防止会话互踩。
FAQ（结构化数据）
Disable cache 会影响其他网站吗？
不会，仅对当前标签且 DevTools 开启时生效，其他标签独立隔离。
为什么 Ctrl+F5 后还是命中缓存？
Ctrl+F5 跳过磁盘缓存，但 Service Worker 内存缓存仍可能优先；需配合 Update on reload 或 Disable cache。
禁用缓存后页面加载变慢怎么办？
调试阶段可接受，若需测速请关闭 DevTools 或使用无痕窗口恢复默认策略。
收尾：下一步行动
总结：Chrome 120+ 的 Disable cache 是断点调试前最可控、可逆的缓存关闭方案，记住“DevTools 开→勾选→刷新”三步即可。调试完关闭工具，浏览器自动恢复缓存，既不影响日常体验，也杜绝旧代码幽灵。下次遇到断点行号错乱，先检查 Network 面板是否已“from network”，再动手清别的存储。
未来版本大概率会继续细化会话隔离与图标提示，甚至提供“一键仅禁用 JS 缓存”的粒度开关；在官方更新前，用好现有复选框就能覆盖 90% 的调试场景。
