为网站开发禁用 Chrome 缓存答案

【问题标题】：Disabling Chrome cache for website development为网站开发禁用 Chrome 缓存
【发布时间】：2011-08-07 02:39:40
【问题描述】：

我正在修改网站的外观（CSS 修改），但由于烦人的持久缓存，在 Chrome 上看不到结果。我试过 Shift+refresh 但它不起作用。

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

【问题讨论】：

这可能是最糟糕的 Chrome 错误。我已经浪费了太多时间想知道为什么事情会出错，结果却发现——尽管使用 ^F5 强制完全重新加载——它使用了一个小时前的陈旧资源。
浏览器应该缓存。请记住，您的用户也将被缓存 - 因此在您的网站投入生产后可能看不到您所做的更改。避免这种情况的方法是对文件进行版本控制。 my_css.css?version=something_unique。如果浏览器之前没有看到该版本，则它会再次下载该文件。例如，something_unique 可以是最后修改日期。
@user984003 Ctrl+Shift+R 或 Shift+R 应该刷新缓存...
@user984003 如果我告诉他们不要缓存，则不会。是的，缓存清除版本号非常适合最终版本，因为这是用户正在使用的版本，但是当我构建一个新站点并且我希望看到增量更改时，我不会每次都更改版本号.因此我使用 Firefox 进行开发 - 它具有最可靠的缓存禁用选项！
@user984003 是的，浏览器应该在浏览时缓存...。开发时，您需要对此进行更多控制。

标签： google-chrome caching browser google-chrome-devtools browser-cache

【解决方案1】：

“烦人”缓存的问题通常在于框架:)。让我们看看细节。大多数框架在 .htaccess (os equivalnent) 中使用 derective 将所有请求重定向到框架“索引”，

但同时排除应用程序直接请求的文件和目录。

（例如 .htaccess 的典型指令是：

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]

)

因此，所有 .js、.css 文件作为图形文件都不由框架“索引”处理。

这些文件通常在开发过程中最常更改。

这就是为什么缓存控制指令不应该放在框架“索引”中的原因。

应该放在 .htaccess 中。

F.e.供开发过程使用：

  Header set Cache-Control "no-store, no-cache, must-revalidate"
  Header set Pragma "no-cache"

（或者对于连续的工作版本，使用“Etag”指令 - 在 HTTP 参考中查看更多信息。请注意，ETag 不适用于开发。

在 .htaccess 中没有直接的方法来生成随机数（或快速变化的序列，如日期 UTC）以在 ETag 中使用，因为 - 正如我之前提到的 - 这不是提供的）。

希望它能帮助并节省时间。

【讨论】：

【解决方案2】：

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

禁用缓存的网络选项卡

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

禁用缓存未选中

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

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

限制

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

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

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

这里的诀窍是每次发出请求时都向您的资源添加一个随机值的查询参数。使用 Requestly Query Param Rule，你可以像这样添加一个参数

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

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

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

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

在这里您可以看到“禁用缓存”没有被选中，并且由于 URL 中的随机参数（cb - Read it as Cache buster），资源仍然没有从缓存中加载。

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

如何获得规则

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

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

【讨论】：

【解决方案3】：

Chrome DevTools 可以禁用缓存。

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

F12
控制+Shift+i
命令+Shift+i

单击工具栏中的Network 打开网络窗格。
选中顶部的Disable cache复选框。

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

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

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

命令+选项+R在Mac上
Control+Shift+R 在 Windows 或 Linux 上

【讨论】：

mac上硬刷新的快捷键是Command + Shift + R
我发现在测试 Amazon Cloudfront 分配设置的更改时，即使在 DevTools 中“禁用缓存”或使用“空缓存和硬重载”也不起作用。必须关闭隐身窗口，手动清除缓存，然后重新打开隐身窗口，重新输入网址才能看到更新，非常不方便。

【解决方案4】：

我的情况是浏览器从磁盘加载缓存数据，即使我检查它禁用缓存（我使用的是 Chrome）。我所有的 CSS 和 JS 都是从服务器加载的，而不是从网页加载的。这发生在我的本地和生产上。

要修复它，我需要在我的 URL 中添加一个额外的参数来强制浏览器从服务器获取网页，即使控制器不需要它。

我使用的是 ASP.Net，所以这是我的示例：

//Controller function
public ActionResult Index()
    {
        return View();
    }
//Link
@Html.Action("Index", "Home", new { ts = DateTime.Now.Ticks.ToString()})

结果是，它将生成如下链接： http://www.myweb.com/Home/Index?ts=636558555408282209

这是我的情况和解决方案。希望它可以帮助某人。

【讨论】：

【解决方案5】：

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

安装后，右键点击选项：

查看Automatically reload active tab after clearing data:

为时间段选择Everything：

然后您可以转到菜单 => 工具 => 扩展：

点击底部的快捷键：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

我遇到了同样的问题，我试过了：

控制 Shift R，
在 F12 中禁用缓存
控制 F5。

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

【讨论】：

【解决方案9】：

F12 打开 Chrome DevTools
F1 打开 DevTools 设置
勾选禁用缓存（DevTools打开时）如下图：

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

【讨论】：

这与直接在 F12 Chrome Devtools 中检查“禁用缓存”的作用相同，当您重新启动 Chrome 时它将重置。

【解决方案10】：

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

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

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

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

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

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

【讨论】：

是的，Chrome 开发工具选项似乎对我不起作用。但是缓存杀手就像一个魅力。重新加载时间明显变慢，例如 4-5 倍，但新内容的实际提供显然要快得多。
清除缓存和禁用缓存仅在我的 Mac 上的本地主机上工作时才有效。对于在线内容，我感到耳目一新，希望能看到任何变化。这个扩展是救命稻草。
我发现使用禁用缓存会导致本地存储出现问题，特别是使用 Auth0 的角度存储。 Cache Killer 完美运行，不会导致本地存储出现问题。
因恶意软件而从 Chrome 扩展程序商店中删除 :( 替代方案？
结束了我自己的编写，工作方式相同，但可以在每个选项卡上切换。 MIT 许可证，没有恶意软件，我保证?！ github.com/themichaelyang/cache-clearer

【解决方案11】：

将此代码字符串添加到您的代码中，它应该可以解决问题。

<meta name="robots" content="noarchive">

【讨论】：

【解决方案12】：

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

右键单击重新加载图标（url 字段左侧），您会看到一个下拉菜单，选择第三个选项：'empty Cache and Hard reload'。

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

【讨论】：

【解决方案13】：

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

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

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

【讨论】：

【解决方案14】：

而不是按“F5” 随便打：

“Ctrl + F5”

【讨论】：

它也适用于 Firefox（不是因为它与这个问题相关，但有人可能会觉得它有用）

【解决方案15】：

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

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

某些浏览器还具有Cache，与Service Workers 结合使用，以创建提供离线支持的渐进式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()
    }) 
  })

【讨论】：

【解决方案16】：

不确定您使用的是什么，但如果您使用的是 ASP.Net，您可以执行以下操作：

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

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

【讨论】：

绝对。我使用了这个和条件编译，所以它不会出现在测试和发布版本中。
更好的方法是使用 css 文件修改时间作为变量值。该解决方案也可以在生产环境中使用。它只是工作:) 不确定它是如何在 ASP 中完成的，但在 PHP 中是这样的

【解决方案17】：

这可能对某人有所帮助。

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

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

只要我想在同一模式下重新加载，在隐身模式下硬刷新就可以解决问题。

【讨论】：

【解决方案18】：

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

【讨论】：

【解决方案19】：

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

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

【讨论】：

【解决方案20】：

还有两个选项可以在 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 的路径不变

【讨论】：

好答案。虽然对于大多数人来说，禁用缓存只是开发过程中的暂时性事情。永久禁用它会显着减慢正常的浏览体验，并且是一种糟糕的互联网公民，因为它会给您访问的网络服务器带来不必要的负载。
我不同意糟糕的互联网公民问题，我们在这里谈论的是为开发工作创建一些捷径。所以这绝对是最好的答案恕我直言。只是一件小事。每次我在 Windows 上将此 SO 页面复制到某个 Chrome 快捷方式中时，某些字符都无法正确显示。这些是正确的："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-application-cache --media-cache-size=1 --disk-cache-size=1 另外，"%1" 之前的字符是什么？我不知道。
我正在寻找 chrome cli 参数以在没有缓存的情况下启动它（用于 CI 目的）。这些似乎没有任何作用。如果我加载一个页面，然后使用 F5（不是 ctrl+F5）重新加载它，缓存仍然被使用。在过去 3 年中，铬在这些方面有什么变化吗？
刚刚发现--media-cache-size 2年前被删除了：chromium-review.googlesource.com/c/chromium/src/+/1661077

【解决方案21】：

上面提到的其他选项我都用过，但我发现最好的方法是在chrome.exe的启动中添加以下参数。

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

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

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

【讨论】：

【解决方案22】：

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

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

【讨论】：

虽然它在 mac 上肯定不起作用，但我点击了带有各种组合键的重新加载按钮 ;)
@ManirajSS：它将重新加载所有内容并避免使用缓存，但不会在页面加载后重新下载通过 javascript 下载的内容。我不确定为什么有人会使用它，但我想你可以想出一些有用的极端案例。
也不会清除页面内 iframe 的缓存。
不确定这种情况持续了多久，但从 Chrome 41 开始，只要您打开了开发者工具窗口，单击并按住重新加载按钮即可在 OS X 上运行。

【解决方案23】：

如果您不想修改 Chrome 的设置，您可以使用隐身模式来获得相同的结果。

【讨论】：

【解决方案24】：

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

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

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

    echo $rand;

就是这样！将不再有浏览器缓存您的网站 - 无论哪种浏览器。

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

【讨论】：

【解决方案25】：

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

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

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

因为这是意外的崩溃可能会发生，但如果他们这样做了，那么这显然会指向一个更严重的错误，无论如何都应该修复。

【讨论】：

【解决方案26】：

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

【讨论】：

【解决方案27】：

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

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

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

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

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

【讨论】：

【解决方案28】：

如何更改页面名称以防止页面缓存的小书签。在 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;})();

【讨论】：

【解决方案29】：

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

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

非常非常好！

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

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

【讨论】：

找不到选项来定义它在哪个域上执行此操作。看起来不太好。 chrome.google.com/webstore/detail/cache-killer/… ..怎么样？
浏览器中的清除缓存图标，右键单击，选项，然后在cookies下。有一个小设置图标。

【解决方案30】：

只有在打开开发工具时才能在 chrome 中禁用缓存

【讨论】：

可能是一个错误，或者它仅适用于开发人员 - 这表示我认为非开发人员也想使用禁用缓存选项¯\_(ツ)_/¯