google-chrome - 为网站开发禁用 Chrome 缓存

Question

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

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

score 2051 · Accepted Answer

Chrome DevTools 可以禁用缓存。

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

F12
Control+ Shift+i
Command+ Shift+i

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

开发工具面板截图

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

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

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

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

score 253 · Accepted Answer

在此处输入图像描述

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

Chrome 商店链接（免费） （现在没有恶意软件！）

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

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

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

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

score 203 · Accepted Answer

重新加载菜单的图片

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

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

score 49 · Accepted Answer

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

score 33 · Accepted Answer

33

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

于 2014-04-03T01:33:21.640 回答

score 23 · Accepted Answer

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

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

score 22 · Accepted Answer

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

score 18 · Accepted Answer

18

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

“Ctrl + F5”

于 2016-11-24T15:56:54.623 回答

score 17 · Accepted Answer

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

在 Chrome Canary 频道中禁用缓存

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

score 15 · Accepted Answer

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

score 15 · Accepted Answer

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

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

score 14 · Accepted Answer

14

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

于 2013-03-27T09:54:25.393 回答

score 14 · Accepted Answer

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

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

检查Automatically reload active tab after clearing data：

选择Everything时间段：

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

点击底部的键盘快捷键：

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

score 9 · Accepted Answer

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

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

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

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

score 8 · Accepted Answer

这可能会帮助某人。

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

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

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

score 6 · Accepted Answer

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

score 6 · Accepted Answer

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

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

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

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

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

score 6 · Accepted Answer

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

禁用缓存的网络选项卡

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

禁用缓存未选中

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

这适用于本地 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 位随机数。

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

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

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

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

如何获得规则

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

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

score 5 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

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

非常非常棒！

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

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

score 2 · Accepted Answer

我的第三个 Chrome 扩展页面大小检查器提供了另一个禁用缓存的选项，它禁用缓存的方式与 Devtools 完全相同。

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

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

控制换档 R，
F12 禁用缓存
控制 F5。

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

score 2 · Accepted Answer

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

在此处输入图像描述

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

    echo $rand;

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

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

目前尚不清楚您指的是哪个“缓存”。有几种不同的方法可以让浏览器持久地缓存内容。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()
    }) 
  })

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

我的情况是浏览器从磁盘加载缓存数据，即使我检查它禁用缓存（我使用的是 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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

“烦人”缓存的问题通常在于框架:)。让我们看看细节。大多数框架在 .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 中。

Fe供开发过程使用：

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

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

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

希望它有所帮助并节省时间。

score -1 · Accepted Answer

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

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