禁用 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 Reload或 “ Empty Cache and Hard Reload ,应该会产生类似的效果。了解选项之间的区别 。可以使用以下快捷方式:

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

长按

在此处输入图片说明

当您需要每小时清除 30 次缓存时,清除缓存太烦人了。. 因此,我安装了一个称为Classic Cache Killer的 Chrome 扩展程序,该扩展程序可在每次页面加载时清除缓存。

Chrome 商店链接(免费) (现在没有恶意软件!)

现在,我的模拟 json,javascript,css,html 和数据每次每次页面加载 都会刷新。

永远不必担心是否需要清除缓存。

我发现有大约 20 种适用于 Chrome 的缓存清理器,但是这种清理器看起来很轻巧,而且几乎不费力。在更新中,Cache Killer 现在可以保持 “始终打开” 状态。

注意:我完全不了解插件作者。我只是觉得有用。

重新加载菜单的图片

  1. F12 ,然后(在控制台打开的情况下)拉起 Chrome 开发者控制台:

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

这将超出 “硬重载” 以完全清空缓存,从而确保通过 javascript 等下载的任何内容也将避免使用缓存。您不必弄乱设置或其他任何东西,这是一种快速的一键式解决方案。

永久禁用 Chrome 中还有两个选项可以禁用页面缓存

1. 在注册表中停用 Chrome 缓存

打开注册表(开始 -> 命令 -> Regedit)

搜索: HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command

将... chrom.exe 之后的部分更改为以下值: –disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

示例: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

重要:

  • ... chrome.exe 之后有一个空格和一个连字符”

  • 保留 chrome.exe 的路径

  • 如果复制该行,请确保检查引号是否为实际引号。

2. 通过更改快捷方式属性来停用 Chrome 缓存

右键单击 Chrome 图标,然后在上下文菜单中选择 “属性”。在路径中添加以下值: –disk-cache-size=1

示例: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –disk-cache-size=1

重要:

  • ... chrome.exe 之后有一个空格和一个连字符”

  • 保留 chrome.exe 的路径

如果您不想编辑 Chrome 的设置,则可以使用隐身模式获得相同的结果。

除了禁用缓存选项(可通过开发人员工具窗口右下角的按钮 - 工具 | 开发人员工具,或Ctrl + Shift + I进入)之外,在开发人员工具的网络窗格中,您还可以现在,右键单击并从弹出菜单中选择 “清除缓存”。

  1. F12打开 Chrome DevTools
  2. F1打开 DevTools 设置
  3. 选中禁用缓存(打开 DevTools 时) ,如下所示:

当前位于 “ 选项” 选项卡上,这是默认选项。您可能需要向下滚动。自问这个问题以来,此复选框已移动了至少两次。最后我检查了一下,它在底部的中间列中。如果您在较薄的屏幕上打开它,并且 “首选项” 下有两列,则该列可能位于右上角附近。如有任何更改或评论,请随时更新。我将更新该帖子。

在此处输入图片说明

而不是按 “F5”:

“Ctrl + F5”

在 Canary 频道中(也许会紧随开发者和稳定频道),这是 “常规” 部分下左侧的第二个总体选择。

禁用Chrome Canary Channel中的缓存

除此之外,始终可以通过 Ctrl + Shift + N 切换到隐身模式。尽管很遗憾,这也结束了您的会话。

使用Ctrl + Shift + R刷新很不错,但没有得到我需要的一切。仍然有些事情不会刷新,例如存储在 js 和 CSS 中的数据。找到了解决方案: 适用于 Chrome Web 开发人员的 google 工具栏 。安装工具栏后,选择选项和 “重置页面”。