为网站开发禁用 Chrome 缓存

Chrome DevTools 可以禁用缓存。

右键单击并选择 Inspect Element 以打开 DevTools。或使用以下键盘快捷键之一：

F12

Ctrl+Shift+i

命令+Shift+i

单击工具栏中的网络以打开网络窗格。选中顶部的禁用缓存复选框。

https://i.stack.imgur.com/Grwsc.png

请记住，正如 @ChromiumDev 中的 tweet 所述，此设置仅在开发工具打开时才有效。

请注意，这将导致 所有 资源被重新加载。如果您希望仅为某些资源禁用缓存，您可以modify the HTTP header让您的服务器与您的文件一起发送。

如果您不想使用 Disable cache 复选框，则长按刷新按钮打开 DevTools 将显示一个菜单，其中包含 Hard Reload 或 Empty Cache and Hard Reload 选项，其中应该有类似的效果。阅读 difference between the options 以了解选择哪个选项。可以使用以下快捷方式：

Mac 上的 Command+Shift+R

Windows 或 Linux 上的 Control+Shift+R

https://i.stack.imgur.com/QAtRy.jpg

---

https://i.stack.imgur.com/6LLjA.png

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

Chrome Store Link (free) （现在没有恶意软件！）

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

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

我发现大约有 20 个用于 Chrome 的缓存清理器，但这个似乎轻量级且零工作。在更新中，缓存杀手现在可以保持“永远在线”。

注意：我不知道插件作者。我只是发现它很有用。

---

https://i.stack.imgur.com/QAtRy.jpg

按 F12 调出 Chrome 开发者控制台，然后（在控制台打开的情况下）：右键单击（或按住左键单击）浏览器顶部的重新加载按钮，然后选择“清空缓存和硬重新加载”。

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

---

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

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

打开注册表（开始 -> 命令 -> 注册表编辑器）

搜索：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 的设置，您可以使用隐身模式来获得相同的结果。

---

F12 打开 Chrome DevTools F1 打开 DevTools Settings Check Disable cache (while DevTools is open) 如下图：

当前位于“首选项”选项卡上，这是默认设置。您可能需要向下滚动。自提出此问题以来，此复选框已至少移动了几次。最后我检查了一下，它位于底部的中间列。如果你在更薄的屏幕上打开它并且在 Preferences 下有 2 列，它可能在右上角附近。如果它发生变化或评论，请随时更新这篇文章，我会更新这篇文章。

https://i.stack.imgur.com/lNNUE.png

---

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

---

而不是点击“F5”只需点击：

“Ctrl + F5”

---

在 Canary 频道（也许开发和稳定频道也会随之而来）中，这将作为第二个选项在左侧的“常规”部分下找到。

https://i.stack.imgur.com/wz03v.png

除此之外，始终可以选择通过 Ctrl + Shift + N 切换到隐身模式。尽管不幸的是，这也会结束您的会话。

---

需要明确的是，Chrome 中的禁用缓存复选框（这里是 v17，但我相信从 v15 开始）不在主设置 UI 中。它位于开发人员工具设置 UI 中。

从浏览器窗口的扳手图标菜单（首选项菜单）中选择工具 → 开发人员工具 在出现的开发人员工具 UI 中，单击右下角的齿轮图标。选中“网络”部分中的“禁用缓存”复选框。

---

使用 Ctrl+Shift+R 刷新很好，但没有得到我需要的一切。仍然有些东西不会刷新，例如存储在 js 和 css 中的数据。找到了解决方案：toolbar of google for chrome web developers。安装工具栏后选择选项和“重置页面”。

---

禁用 chrome 中的缓存仅在您打开开发工具时才有效

---

在修复错误之前，您可以使用 Clear Cache Chrome 插件，也可以为其设置键盘快捷键。

安装后，右键单击并转到选项：

https://i.stack.imgur.com/lt7Mp.png

检查Automatically reload active tab after clearing data：

https://i.stack.imgur.com/nPGOY.png

选择 Everything 作为时间段：

https://i.stack.imgur.com/x6YMJ.png

然后你可以去菜单 => 工具 => 扩展：

https://i.stack.imgur.com/3VltC.png

点击底部的键盘快捷键：

https://i.stack.imgur.com/8ZYxR.png

并设置您的键盘快捷键，例如 Ctrl + Shift +R：

https://i.stack.imgur.com/0rQV8.png

---

实际上，如果您不介意使用带宽，出于多种原因禁用缓存会更安全，并且许多安全站点都建议您这样做。

Chromium 不应该傲慢到足以为用户做出决定和强制设置。

您可以使用 --disk-cache-dir=/dev/null 在 UNIX 上禁用缓存。

由于这是意外的崩溃，可能会发生，但如果他们这样做了，那将清楚地指出一个更严重的错误，无论如何都应该修复。

---

这可能会帮助某人。

我已经为我的 Nginx 进行了疯狂的缓存。因此，在网络工具中禁用缓存并显式清除缓存不起作用。

一个非常简单但无聊的解决方法是，我只打开一个新的隐身标签。令人惊讶的是，它一直有效！

每当我希望以相同模式重新加载时，隐身模式下的硬刷新就可以解决问题。

---

当被问到这个问题时，Chrome 不支持禁用缓存功能。但是现在，您可以在 Chrome 开发工具的网络选项卡中找到“禁用缓存”功能。

禁用缓存的网络选项卡

https://i.stack.imgur.com/gsU4V.png

你可以看到所有的资源（我已经过滤了JS资源）都是从网络中获取的，而不是从磁盘/内存缓存中加载的。

禁用缓存未选中

https://i.stack.imgur.com/umfpX.png

可以看到，当我刷新页面但没有选择“禁用缓存”功能时，几乎所有的资源都是从缓存中加载的。

这适用于本地 Web 开发，但我想强调某些限制。如果到目前为止讨论的解决方案符合您的用例，您可以在此处停止阅读。

限制

您必须保持 DevTools 处于打开状态并选择禁用缓存 当您禁用缓存时，该选项卡中的所有资源都会禁用它。如果您只想为 1-2 个资源禁用缓存，它会使事情变得缓慢且效率低下

使用 Requestly Chrome 扩展来禁用特定资源（JS/CSS/图像等）的缓存

最近，我偶然发现了 https://dev.to/requestlyio/disable-caching-of-particular-js-css-file-2k82，它帮助我了解了如何禁用特定资源的缓存。

这里的技巧是在每次发出请求时向您的资源添加一个随机值的查询参数。使用请求查询参数规则，您可以添加这样的参数

URL Contains mywebsite.com/myresource.js
Add param cb rq_rand(4)

发出请求时，rq_rand(4) 被替换为 4 位随机数。

请求查询参数规则添加随机参数

https://i.stack.imgur.com/UIEjt.png

添加规则后，JS/CSS文件不缓存

https://i.stack.imgur.com/avXpt.png

在这里您可以看到“禁用缓存”没有被选中，并且由于 URL 中的随机参数（cb - 将其读取为缓存破坏器），仍然没有从缓存加载资源。

好消息是您无需为具有此行为而打开您的开发工具您可以将其永久打开，您的浏览体验也不会受到影响。

如何获得规则

这是您可以浏览的链接 &如果您已请求安装，请下载规则 - https://app.requestly.io/rules/#sharedList/1600501411585-disable-cache-stackoverflow

免责声明：我构建了 Requestly，但我认为这可能对许多 Web 开发人员有所帮助，因此在这里分享。

---

如何更改页面名称以防止页面缓存的小书签。在 Chrome 中，您将创建一个新书签，然后将代码粘贴到 URL 中。单击书签，页面将重新加载时间戳以阻止缓存。

javascript:(function(){var idx = location.href.indexOf('?');var d = new Date();var str = location.href.substr(0,idx) + '?version=' + d.getTime();location.href=str; void 0;})();

---

我刚刚被抓住了，但不一定是因为 Chrome。

我正在使用 jQuery 发出 AJAX 请求。我在请求中将缓存属性设置为 true：

   $.ajax({
        type: 'GET',
        cache: true,
        ....

将此设置为 false 解决了我的问题，但这并不理想。

我不知道这些数据保存在哪里，但我知道 chrome 从未向服务器发送请求。

---

现在有更好更快的方法（Chrome 版本 59.xx）：

右键单击重新加载图标（url 字段的左侧），您会看到一个下拉菜单，选择第三个选项：“空缓存和硬重新加载”。

此选项仅在开发人员工具打开时可用。 （注意与选项 2 的区别：“硬重新加载”-cmd-shift-R）。这里没有缓存清空！

---

chrome 网上商店中有一个名为 Clear Cache 的 chrome 扩展程序。

我每天都使用它，我认为它是一个非常有用的工具。您可以将其用作重新加载按钮并清除缓存，如果您还喜欢 cookie、区域设置存储、表单数据等。您还可以定义在哪个域上发生这种情况。因此，只需在您选择的域上按下重新加载按钮即可清除所有这些狗屎。

非常非常棒！

您还可以在选项中为此定义键盘快捷键！

另一种方法是以隐身模式启动您的 chrome 窗口。这里缓存也应该被完全禁用。

---

我的第三个 Chrome 扩展程序 Page Size Inspector 提供了另一个禁用缓存的选项，它与 Devtools 的禁用方式完全相同。

此外，该扩展程序以方便的方式快速报告网页的页面大小、缓存使用情况、网络请求和加载时间。加上它在 Github 的开源。

https://i.stack.imgur.com/a0PIK.png

---

不确定您使用的是什么，但如果您使用的是 ASP.Net，您可以执行以下操作，这就像一个魅力：

<link href="@Url.Content("~/Content/Site.css")?time=@DateTime.Now" rel="stylesheet" />

基本上它会在每次运行时自动将日期和时间附加到文件的末尾，这意味着由于文件名在技术上是不同的，你永远不必担心它会再次被缓存。

---

我有同样的问题，我试过：

控制换档 R，

F12 禁用缓存

控制 F5。

然后我发现不推荐使用 .appcache 非 https 站点的清单。我删除了我的 site.appcache 文件及其在 html 标记中的引用，现在我看到了每个页面的最新版本！

---

如果您正在使用 ServiceWorkers（例如：对于 Progressive Web 应用程序），您可能还需要在开发工具中的 Application > Service Workers 下检查“重新加载时更新”。

https://i.stack.imgur.com/lfnnB.png

---

从版本 50 开始（如果我没记错的话），“禁用缓存”选项已从 Devtool 设置中删除。转到“网络”选项卡，然后有“禁用缓存”选项。

---

嘿，如果您的网站使用的是 PHP，那么在您的 html 页面的开头放置以下 PHP 小片段：

   //dev versioning - stop caching
   $rand = rand(1, 99999999);

现在，无论您在脚本或链接元素中加载 CSS- 或 JS- 文件等资源的任何地方，您都可以在附加“？”后将生成的随机值附加到请求 URL。通过 PHP 到 URI：

    echo $rand;

而已！将不再有浏览器缓存您的网站 - 无论哪种浏览器。

当然，在发布之前删除您的代码，或者简单地将 $rand 设置为空字符串以允许再次缓存。

---

我已经使用了上面描述的其他选项，但我发现最好的方法是将以下参数添加到 chrome.exe 的启动中。

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

我发现不禁用媒体缓存是个好主意，但为了完整起见，它在这里。

实际上，我想要一个选项来完全禁用缓存，将内存用于 IO 而不是我的磁盘（这也会使加载时间快 10 倍！）但我认为 chrome 或任何浏览器都没有这个选项.

---

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

不清楚您指的是哪个“缓存”。浏览器可以通过多种不同的方法来持久缓存内容。 Web Storage 是其中之一，Cache-Control 是另一个。

某些浏览器还具有与 Service Workers 结合使用的 Cache，以创建提供离线支持的渐进式 Web 应用程序 (PWA)。

清除 PWA 的缓存

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

列出缓存键的名称，然后运行：

self.caches.delete('my-site-cache')

按名称删除缓存键（即 my-site-cache）。然后刷新页面。

如果刷新后在控制台看到任何与worker相关的错误，您可能还需要注销已注册的worker：

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

---

Chrome 的缓存杀手是迄今为止最好的选择。由于安装缓存杀手的商店 URL 已关闭，您可以在此处下载 CRX 文件：

https://www.crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap/

下载扩展文件后，打开 Chrome -> 更多工具 -> 扩展，然后将 CRX 文件从文件资源管理器或桌面（取决于您下载文件的位置）拖到 chrome 窗口中以安装扩展。

---

我使用（在 Windows 中），ctrl + shift + delete，当 chrome 对话框出现时，按 enter 键。这可以配置为每次执行此序列时需要清除的内容。无需开发。在这种情况下打开工具。

---