协慌网

登录 贡献 社区

禁用 Chrome 缓存以进行网站开发

我正在修改网站的外观(CSS 修改),但由于恼人的持久缓存,无法在 Chrome 上看到结果。我试过Shift + 刷新但它不起作用。

如何暂时禁用缓存或以某种方式刷新页面以便我可以看到更改?

答案

Chrome DevTools 可以禁用缓存。

  1. 右键单击并选择Inspect Element以打开 DevTools。或使用以下键盘快捷键
    • F12
    • Mac 上的Command + Option + i
    • Windows 或 Linux 上的Control + Shift + i
  2. 点击 Network工具栏中打开网络窗格。
  3. 选中顶部的 “ Disable cache复选框。

开发工具面板的屏幕截图

请记住,正如@ChromiumDev所述的推文所述,此设置仅在 devtools 打开时才有效

请注意,这将导致重新加载所有资源。如果您希望仅为某些资源禁用缓存,则可以修改服务器与文件一起发送的 HTTP 标头

如果您不想使用 “ Disable cache复选框,则在打开 DevTools的情况下长按刷新按钮将显示一个菜单,其中包含Hard ReloadEmpty Cache and Hard Reload的选项,这些选项应具有类似的效果。了解选项之间的差异 。可以使用以下快捷方式:

  • Mac 上的Command + Option + R.
  • Windows 或 Linux 上的Control + Shift + R.

长按

在此处输入图像描述

当你需要每小时清理缓存 30 次时清除缓存太烦人了。所以我安装了一个名为Classic Cache Killer的 Chrome 扩展程序,可以在每次加载页面时清除缓存。

Chrome Store Link(免费) (现在没有恶意软件!)

现在我的模拟 JSON,JavaScript 的 CSS,HTML 格式和数据刷新每个页面加载 每次

如果我需要清除缓存,我永远不必担心。

我找到了大约 20 个用于 Chrome 的缓存清理程序,但这个看起来很轻巧且省力。在更新中,Cache Killer 现在可以保持 “始终开启” 状态。

注意:我不知道插件作者的任何方式。我发现它很有用。

重装菜单的图片

  1. F12然后(打开控制台)拉起 Chrome 开发者控制台:

  2. 右键单击(或按住左键单击)浏览器顶部的重新加载按钮,然后选择 “清空缓存和硬重新加载”。

这将超出 “Hard Reload” 以完全清空缓存,确保通过 javascript 等下载的任何内容也将避免使用缓存。你不必弄乱设置或任何东西,这是一个快速的一次性解决方案。