禁用用于网站开发的 Chrome 缓存

使用++刷新很好，但没有得到我需要的一切。 仍然有些东西不会刷新，例如存储在 JS 和 CSS 中的数据。 找到了一个解决方案：Google 为 Chrome Web 开发人员提供的工具栏。安装工具栏后，选择选项并“重置页面”。CtrlShiftR

Chrome DevTools 可以禁用缓存。

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

• F12
• Control+Shift+i
• Command+Shift+i

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

请记住，正如 @ChromiumDev 的一条推文所述，此设置仅在 devtools 打开时处于活动状态。

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

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

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

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

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

1. 从浏览器窗口的扳手图标菜单（首选项菜单）中，选择“工具”→“开发人员工具”

2. 在显示的开发人员工具 UI 中，单击右下角的齿轮图标。

3. 选中“网络”部分中的“禁用缓存”复选框。

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

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

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

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

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

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

我发现大约有 20 个用于 Chrome 的缓存清理器，但这个似乎很轻巧，而且毫不费力。在更新中，Cache Killer 现在可以保持“始终开启”。

注意：我不认识插件作者。我只是觉得它有用。

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

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

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

非常非常好！

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

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

如何更改页面名称以防止页面缓存的书签。在 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 中的页面缓存：

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 的路径

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

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

检查：Automatically reload active tab after clearing data

选择时间段：Everything

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

单击底部的键盘快捷键：

并设置键盘快捷键，例如+ +：CtrlShiftR

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

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

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

由于这是意外的，可能会发生崩溃，但如果它们发生，那么这显然表明一个更严重的错误，无论如何都应该修复。

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

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

现在，无论您在脚本或链接元素中加载 CSS 或 JS 文件等资源，只要您通过 PHP 将 '？' 附加到 URI 后，您都会将生成的随机值附加到请求 URL：

    echo $rand;

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

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

1. 按 ，然后（在控制台打开的情况下）拉出 Chrome 开发者控制台：F12

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

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

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

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

“C：\Program Files （x86）\Google\Chrome\Application\chrome.exe” --disk-cache-size=1 -媒体缓存=1

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

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

1. F12打开 Chrome DevTools
2. F1打开 DevTools 设置
3. 选中“禁用缓存（当 DevTools 处于打开状态时）”，如下所示：

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

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

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

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

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

“Ctrl + F5”

这可能会对某人有所帮助。

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

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

隐身模式下的硬刷新可以在我希望以相同模式重新加载的任何时候解决问题。

不确定您使用的是什么，但如果您使用的是 ASP.Net 您可以执行以下操作，其工作原理类似于魅力：

<link href="@Url.Content("~/Content/Site.css")[email protected]" rel="stylesheet" />

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

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

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

某些浏览器还具有缓存，与 Service Worker 结合使用，用于创建提供脱机支持的渐进式 Web 应用 （PWA）。

清除 PWA 的缓存

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

若要列出缓存键的名称，请运行：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

禁用缓存的网络选项卡

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

禁用未选择缓存

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

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

局限性

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

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

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

这里的诀窍是在每次发出请求时向资源添加一个具有随机值的查询参数。使用 Requestly 查询参数规则，您可以添加如下参数

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

rq_rand（4） 在发出请求时被替换为 4 位随机数。

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

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

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

1. 好消息是，你不需要为有这种行为而保持你的开发工具处于打开状态
2. 您可以永久启用此功能，您的浏览体验也不会受到影响。

如何获取规则

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

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

一般来说，“烦人”缓存的问题出在框架:)上。让我们看看细节。 大多数框架在 .htaccess 中使用（os 等效）derective 将所有请求重定向到框架“索引”，

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

（例如，对于.htaccess，典型指令是：

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

)

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

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

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

它应该在 .htaccess 中苍白无力。

F.e. 用于开发过程：

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

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

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

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