Chrome 总是自动勾选 Disable cache 解决方法

场景

在开发过程中，发现控制台中 Network 的 Disable cache 总是莫名其妙的被勾选，取消勾选后，重新打开网页，或者重启浏览器还是会遇到

这个勾选项的作用是：只要开发者工具处于打开状态，所有请求都跳过缓存，强制走网络。调试静态资源的时候很有用，改完文件刷新就是最新的，不用管缓存策略。

但它一直开着是有代价的。最直接的是每次刷新都要重新下载全部资源，页面加载明显变慢，本地开发时可能感觉不出来，一旦调试的是线上环境或者资源较多的页面，差别就出来了。更麻烦的是它会掩盖缓存相关的问题：想验证 Cache-Control 配得对不对、ETag 有没有正常返回 304、Service Worker 的缓存策略是否生效，只要这个勾还在，看到的永远是全量请求，验证不出任何结果。我就是在排查一个缓存头配置时发现它总是自己勾上，才去找的原因。

下面这张图是问题现象，注意 Network 面板工具栏上 Disable cache 那个复选框处于选中状态。手动取消掉，关掉开发者工具再打开，它又回来了。

解决方法

面板工具栏上那个复选框只是一个临时开关，真正决定初始状态的是开发者工具的持久化设置。所以要去设置面板里改，改工具栏上那个勾是治不住的。

点击控制台中的设置

入口是开发者工具右上角的齿轮图标，也可以在开发者工具获得焦点时按 F1 直接打开。

• 在 Persistence, 取消 Enable Local Override . 这一步很重要,不然没法进行下一步(下一步取消了总是会自动打勾上)
• 在 Network 找到 Disable Cache (While devtool open), 取消打勾

两步的顺序不能颠倒，这是整个问题的症结所在。

本地覆盖这个功能的作用是把线上资源替换成本地文件，用来直接改线上页面调试。它要生效就必须保证浏览器每次都真的去请求资源、好让开发者工具中途拦下来换成本地版本，如果走了缓存，覆盖就没有介入的机会。所以开启本地覆盖时，开发者工具会强制把禁用缓存打开，并且在你手动取消后再次把它勾回去。这就解释了为什么单独取消那个勾毫无效果——不是设置没保存，是被另一个功能反复改回去了。

先关掉本地覆盖，强制的约束解除，再取消禁用缓存的勾，这次才会稳定保持。反过来先取消勾再关本地覆盖，中间那一下又会被重新勾上。

顺带说，如果之前确实在用本地覆盖调试，这个功能对应的本地目录映射不会因为关闭开关而丢失，下次需要时打开开关就能继续用，只是打开的同时禁用缓存又会被强制打开，这是这个功能的固有行为，不算 bug。

下面这张图是设置面板改好之后的状态，左侧是分类导航，可以对照着确认 Network 分类下那一项已经取消，以及 Persistence 分类下的本地覆盖处于关闭状态。改完关掉设置面板即时生效，不需要重启浏览器。