为网站开发禁用Chrome缓存

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

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

811011 次浏览
小开

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

小开
最佳答案

DevToolsChrome可以禁用缓存。

  1. 右键单击并选择Inspect Element打开DevTools。或者使用以下键盘快捷键之一：
  • F12
  • 控制+Shift+我
  • 命令+Shift+我
  1. 点击Network在工具栏中打开网络窗格。
  2. 检查顶部的Disable cache复选框。

开发工具面板截图

请记住，正如@陈志立中的推文所述，此设置为只有在dev工具打开时才有效。

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

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

  • 命令+Shift+R在Mac上
  • 控制+Shift+R在Windows或Linux

长按

小开

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

小开

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

  1. 从浏览器窗口的扳手图标菜单（prefs菜单）选择工具→开发人员工具

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

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

小开

在金丝雀频道（也许开发和稳定频道会随之而来），这是在“常规”部分左侧的第二个选项。

禁用Chrome金丝雀频道中的缓存

除此之外，始终可以选择通过Ctrl+Shift+N切换到隐身模式。

小开

输入图片描述

当您需要每小时清除缓存30次时，清除缓存太烦人了…所以我安装了一个名为经典缓存杀手的Chrome扩展，它可以在每次页面加载时清除缓存。

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

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

我从未必须担心是否需要清除缓存。

我找到的Chrome大约有20个缓存清理程序，但这个似乎轻量级且无需任何努力。在更新中，Cache Killer现在可以保持“始终打开”。

注意：我不知道插件作者以任何方式。我只是觉得它很有用。

小开

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

小开

chrome网络商店中有一个名为清除缓存的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,....

将其设置为虚假解决了我的问题，但这并不理想。

我不知道这些数据保存在哪里，但我知道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的道路保持原样

小开

在bug修复之前，您可以使用清除缓存Chrome插件，也可以为其设置键盘快捷键。

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

在此处输入图片描述

检查Automatically reload active tab after clearing data：

在此处输入图片描述

选择Everything作为时间段：

在此处输入图片描述

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

在此处输入图片描述

点击底部的键盘快捷键：

在此处输入图片描述

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

在此处输入图片描述

小开

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

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

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

由于这是意外的崩溃可能会发生，但如果他们这样做，那么这将清楚地指出一个更严重的bug在任何情况下都应该修复。

小开

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

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

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

    echo $rand;

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

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

小开

重新加载菜单图片

  1. 按F12打开Chrome开发者控制台，然后（控制台打开）：

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

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

小开

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

小开

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

"C：\Program Files（x86）\Google\Chrome\Application\chrome.exe"--disk-cache-size=1-media缓存=1

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

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

小开
  1. F12打开ChromeDevTools
  2. F1打开DevTools设置
  3. 检查禁用缓存（当DevTools打开时）如下所示：

这是目前在偏好选项卡上，这是默认的。您可能需要向下滚动。这个复选框已经被移动了至少几次，因为这个问题被问到。上次我检查，它在底部的中间列。如果你有一个更薄的屏幕上打开它，并且有2列在首选项下，它可能在右上角附近。如果它改变或评论，请随时更新这篇文章，我会更新这篇文章。

在此处输入图片描述

小开

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

小开

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

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

屏幕截图-页面大小检查器

小开

而不是按“F5”点击：

"Ctrl+F5"

小开

这可能会帮助某人。

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

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

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

小开

不知道你在使用什么，但如果你使用的是ASP. Net，你可以做以下事情，这就像一个魅力：

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

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

小开

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

不清楚你指的是哪个“缓存”。浏览器可以持久缓存内容有几种不同的方法。网络存储是其中之一，#0是另一个。

一些浏览器还有#0，与服务工作者一起使用，用于创建提供离线支持的渐进式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窗口中以安装扩展。

小开

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

右键单击重新加载-icon（URL字段的左侧），您将获得一个下拉菜单，选择第三个选项：“空缓存和硬重新加载”。

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

小开

将此代码字符串添加到您的代码中，它应该会起作用。

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

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

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

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

小开

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

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

我用的是ASP. Net，下面是我的例子：

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

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

这是我的情况和解决方案。希望它能帮助到别人。

小开

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

小开

如果您使用的是服务人员（例如：对于渐进式Web应用程序），您可能还需要在开发工具中的应用程序>服务工作者下选中“重新加载时更新”。

输入图片描述

小开

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

禁用缓存的网络选项卡

截图-在Chrome开发工具中禁用缓存功能

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

禁用缓存未选中

在此处输入图片描述

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

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

限制

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

使用请求Chrome扩展禁用特定资源（JS/CSS/图片等）的缓存

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

这里的技巧是在每次发出请求时向您的资源添加一个具有随机值的查询参数

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

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

用于添加随机参数的请求式查询参数规则

在此处输入图片描述

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

请求规则并添加一个随机参数来禁用缓存

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

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

如何获得规则

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

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

小开

一般来说，“烦人”缓存的问题在于框架：）。让我们看看细节。大多数框架在. htaccess（os等效）中使用指示性将所有请求重定向到框架“index”，

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

（f. e.至于. htaccess的典型指令是：

    RewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-lRewriteRule ^(.+)$ index.php?url=$1 [QSA,L]

）

因此，所有. js、. css文件作为图形文件不会被框架“index”处理。

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

这就是为什么缓存控制derective不应该放在框架“index”中。

它应该放在. htaccess中。

F. e.用于开发过程：

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

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

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

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

小开

对于使用Chromium在VS Code中调试，我将runtimeArgs的--aggresive-cache-discard添加到我的launch.json文件中。这消除了所有缓存。刷新时立即出现代码更改。


提交答案