1738

我正在修改一个站点的外观(CSS修改),但由于恼人的持久缓存,无法在Chrome上看到结果。我试过了班次+刷新但不起作用。

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

10
  • 210
    这可能是Chrome中最严重的一个错误。我浪费了太多时间想知道为什么会出问题,结果发现——尽管已经用^F5强制重新加载了一次——它使用了一个小时的陈旧资源。 评论 2012年7月27日16:58
  • 52
    浏览器应该缓存。请记住,您的用户也将进行缓存,因此可能无法看到您在站点投入生产后所做的更改。避免这种情况的方法是对文件进行版本控制。我的css.css?版本=something_unique。如果浏览器之前没有看到该版本,则会再次下载该文件。例如,somethingunique可以是最后修改日期。 评论 2013年1月30日7:34
  • 41
    @用户984003Ctrl+Shift+R组合键Shift+R键应该刷新缓存。。。 评论 2013年2月3日12:52
  • 23
    @user984003如果我告诉他们不要缓存,则不会。是的,缓存支持的版本号对于最终版本来说是很好的,因为这是用户正在使用的版本号,但当我构建一个新站点时,我希望看到增量更改,我不会每次都更改版本号。因此,我为什么用Firefox开发——它有最可靠的缓存禁用选项!
    – 安德鲁
    评论 2013年12月17日6:03
  • 16
    @user984003是的,浏览器应该缓存。。。浏览时。开发时,您需要对其进行更多控制。 评论 2016年5月4日22:58

35个答案35

重置为默认值
2103

Chrome DevTools可以禁用缓存。

  1. 右键单击然后选择检查元件打开DevTools。或使用以下方法之一键盘快捷键:
  • 2012财年
  • 控制+班次+
  • 命令+班次+
  1. 点击 网络在工具栏中打开网络窗格。
  2. 检查这个禁用缓存顶部的复选框。

开发工具面板的屏幕截图

请记住,作为推特@铬开发说明,此设置为仅在开发工具打开时处于活动状态.

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

如果您不想使用禁用缓存复选框,长按刷新按钮打开DevTools将显示包含以下选项的菜单硬重新加载清空缓存和硬重新加载这应该有类似的效果。阅读有关选项之间的差异知道该选择哪个选项。以下快捷方式可用:

  • 命令+班次+R(右)在Mac上
  • 控制+班次+R(右)在Windows或Linux上

长时间按压

5
  • 4
    mac上硬刷新的快捷方式是Command+Shift+R 评论 2021年3月3日13:01
  • 我发现在测试Amazon Cloudfront分发设置中的更改时,即使在DevTools中“禁用缓存”,或使用“清空缓存并硬重新加载”也不会起作用。必须关闭Incognito窗口,手动清除缓存,然后重新打开Incognit窗口,并重新输入URL以查看更新,这非常不方便。
    – 阿兰克
    评论 2021年9月1日23:02
  • 不工作(Chrome 103,Mac)。我正在并行开发几个应用程序,我需要不断手动删除缓存。我不确定这个复选框能做什么,但它根本不起作用。另一件事是命令+选项+r肯定不会刷新缓存。是的,它在不使用缓存的情况下重新加载页面,但当您在不使用选项键的情况下再次加载页面时,您将得到旧的内容。我不得不开始使用两种不同的浏览器。对于所有我想缓存的地方,我都使用Safari,这样我就可以手动刷新Chrome缓存而不会影响任何东西。
    – M斗杆
    评论 2022年7月6日11:45
  • 只有当devtool处于打开状态时,这才起作用,如果您试图消除用于web开发目的的缓存,那么这会完全破坏目的。我的服务器使用VS代码进行自动刷新和自动保存,但浏览器中的缓存非常糟糕。我不能每次编辑时都单击刷新。必须有更好的方法。 评论 2023年4月25日1:48
  • 很好,但不适用于json内容类型,黑客攻击是在url中:…/some.json?2 评论 1月24日16:58
259

在此处输入图像描述

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

Chrome商店链接(免费) (现在没有恶意软件!)

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

从未如果我需要清理我的缓存,我必须担心。

我找到了大约20个Chrome缓存清洁器,但这一个看起来很轻,而且不费力。在更新中,缓存杀手现在可以“始终开启”。

注:我对插件作者一无所知。我发现它很有用。

12
  • 4
    是的,Chrome Dev Tools选项似乎对我不起作用。但缓存杀手很有魅力。重新加载时间明显较慢,大约是4-5倍,但实际提供新内容的速度显然要快得多。 评论 2014年1月24日18:01
  • Clear Cache和Disable Cache仅在我的mac上的localhost上工作时有效。对于在线内容,我正在刷新,希望看到任何变化。这个扩展是一个救命稻草。 评论 2014年2月24日17:31
  • 我发现使用DisableCache会导致本地存储出现问题,特别是Auth0的角度存储。Cache Killer工作正常,不会导致本地存储出现问题。 评论 2016年1月12日21:57
  • 5
    由于恶意软件从Chrome扩展商店中删除:(替代方案? 评论 2017年10月27日7:49
  • 6
    最后写了我自己的,工作原理相同,但可以按标签切换。我保证MIT许可证没有恶意软件😎!github.com/themichaelyang/cache-clearer 评论 2017年11月11日6:56
206

重新加载菜单的图片

  1. 按下,拉起Chrome开发者控制台2012财年然后(打开控制台):

  2. 在浏览器顶部的重新加载按钮上单击鼠标右键(或按住鼠标左键),然后选择“清空缓存和硬重新加载”

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

4
  • 7
    当然,它在mac上肯定不起作用,我已经用各种组合键点击了重新加载按钮;) 评论 2014年5月23日12:59
  • @ManirajSS:它将重新加载所有内容并避免使用缓存,但不会在页面加载后重新下载javascript下载的内容。我不知道为什么有人会使用它,但我想你可以想出一些有用的角落案例。 评论 2014年9月12日19:18
  • 2
    它也不会清除页面内iframe的缓存。 评论 2014年10月20日17:49
  • 7
    不知道这种情况持续了多久,但从Chrome 41开始,只要您打开了开发工具窗口,就可以在OSX上单击并按住重新加载按钮。
    – 基廷
    评论 2015年5月27日2:31
51

还有两种选择永远禁用Chrome中的页面缓存:

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

打开注册表(开始->命令->注册表编辑)

搜索:HKEY_CLASSES_ROOT\ChromeHTML\shell\open\命令

在…之后更改零件。。。chrom.exe”设置为该值:–禁用应用程序缓存–媒体缓存大小=1–磁盘缓存大小=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图标并在上下文菜单中选择“属性”。将以下值添加到路径:–磁盘大小=1

例子:“C:\Program Files(x86)\Google\Chrome\Application\Chrome.exe”–disk-cache-size=1

重要事项:

  • 后面有一个空格和连字符。。。chrome.exe“

  • 保留chrome.exe的路径不变

4
  • 回答得好。虽然对大多数人来说,禁用缓存只是开发过程中的一件临时事情。永久禁用它将大大降低正常的浏览体验,并且是一种不良的互联网公民身份,因为它会给您访问的web服务器带来不必要的负载。 评论 2015年6月26日18:30
  • 4
    我不同意糟糕的互联网公民身份,我们在这里谈论的是为开发工作创造一些捷径。所以这绝对是最好的答案。只是一件小事。每次我在Windows上将这个SO页面复制到Chrome快捷方式中时,都会有一些字符显示不正确。这些是正确的:“C:\Program Files(x86)\Google\Chrome\Application\Chrome.exe”--禁用应用程序缓存--media-cache-size=1--磁盘缓存大小=1另外,前面的字符是什么"%1"? 我不知道。 评论 2018年9月13日16:35
  • 1
    我正在寻找chrome-cli参数,以便在没有缓存的情况下启动它(用于CI目的)。这些似乎什么也做不了。如果我加载了一个页面,然后使用F5(NOT ctrl+F5)重新加载它,缓存仍在使用。在过去3年里,铬的这些方面有什么变化吗? 评论 2021年9月22日13:12
  • 1
    刚刚发现,media-cache-size已于2年前删除:chromium-review.googlesource.com/c/chrome/src/+/1661077 评论 2021年9月22日14:08
34

如果你不想编辑Chrome的设置,你可以使用匿名模式获得相同的结果。

0
23
  1. 2012财年打开Chrome DevTools
  2. 一层楼打开DevTools设置
  3. 检查禁用缓存(当DevTools打开时)如下所示:

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

在此处输入图像描述

1
  • 2
    这和直接在F12 Chrome Devtools上检查“禁用缓存”的操作是一样的,当您重新启动Chrome时,它会重置。 评论 2018年1月23日17:27
22

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

0
18

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

“Ctrl+F5”

1
  • 6
    它也适用于Firefox(不是因为它与这个问题相关,而是有人可能会觉得它很有用)
    – 唐老鸭
    评论 2017年1月1日12:27
17

在Canary频道(也许开发和稳定频道也会紧随其后),这是“常规”部分左侧的第二个选项。

禁用Chrome Canary频道中的缓存

除此之外,您还可以通过Ctrl+Shift+N切换到“隐身模式”,尽管这很不幸也会结束您的会话。

2
  • 4
    根据我的经验,这仅在开发工具打开时有效。我很困惑为什么缓存仍然保留在页面上,直到我意识到我已经关闭了开发工具。奇怪的是,设置没有覆盖所有内容。 评论 2013年6月4日0:12
  • 不幸的是,隐名模式确实会缓存一些图像和文件。 评论 2015年8月6日20:16
15

要明确的是,Chrome中的禁用缓存复选框(这里是v17,但我认为是因为v15)不在主设置UI中。它位于开发人员工具设置UI中。

  1. 从浏览器窗口的扳手图标菜单(首选菜单)中选择工具→开发人员工具

  2. 在显示的开发者工具UI中,单击右下角的装备图标。

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

14

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

1
  • 也许这是一个bug,或者它只适用于开发人员,也就是说,我认为非开发人员也会使用disable cache选项 评论 2013年6月7日10:36
13

使用Ctrl键+班次+R(右)刷新很好,但没有得到我需要的所有东西。仍然有一些东西无法刷新,比如存储在js和css中的数据。找到解决方案:achromeweb开发人员的谷歌工具栏。安装工具栏后,选择选项并“重置页面”。

1
  • 2
    +1.尽管还不完美:对于在本地计算机上开发,缓存是完全不必要的,并且会带来问题,所以我仍然对firebug这样的禁用功能感兴趣。
    – 用户150340
    评论 2011年5月18日6:54
13

在修复错误之前,您可以使用清除缓存Chrome插件,您还可以为其设置键盘快捷方式。

安装后,右键单击并转到选项:

在此处输入图像描述

检查清除数据后自动重新加载活动选项卡:

在此处输入图像描述

选择一切时间段:

在此处输入图像描述

然后您可以进入菜单=>工具=>扩展:

在此处输入图像描述

单击底部的键盘快捷键:

在此处输入图像描述

例如,设置键盘快捷方式Ctrl键+班次+R(右):

在此处输入图像描述

9

事实上,如果你不介意使用带宽,那么出于多种原因禁用缓存会更加安全,许多安全站点都建议这样做。

Chromium不应该傲慢到做出决定并强制用户进行设置。

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

由于这可能会发生意外的崩溃,但如果发生了,则显然会指向一个更严重的错误,在任何情况下都应予以修复。

8

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

我已经操纵我的Nginx进行疯狂缓存。因此,禁用网络工具中的缓存并显式清除缓存是行不通的。

一个很简单但很无聊的解决方法是,我刚打开一个新的“隐姓埋名”标签。令人惊讶的是,它一直都在工作!

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

8

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

禁用缓存的网络选项卡

屏幕截图-禁用Chrome开发工具中的缓存功能

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

未选择禁用缓存

在此处输入图像描述

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

这对于本地web开发来说很好,但我想强调一下其中的一些限制。如果到目前为止讨论的解决方案符合您的用例,您可以停止阅读此处。

限制

  1. 您必须保持DevTools打开并禁用已选择的缓存
  2. 当您禁用缓存时,会对该选项卡中的所有资源禁用缓存。如果您只想对1-2个资源禁用缓存,这会使速度变慢并且效率低下

使用请求Chrome扩展禁用特定资源的缓存(JS/CSS/Images等)

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

这里的诀窍是在每次发出请求时向资源添加一个随机值的查询参数。使用Requestly Query Param Rule,可以添加如下参数

URL包含mywebsite.com/myresource.js添加参数cb rq_rand(4)

当发出请求时,rqr and(4)被4位随机数替换。

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

在此处输入图像描述

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

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

在这里您可以看到,由于URL中的一个随机参数(cb-Read it as Cache buster),没有选择“Disable Cache”,仍然没有从Cache加载资源。

  1. 好的方面是,您不需要保持您的开发工具开放,就可以实现这种行为
  2. 您可以将其永久打开,您的浏览体验也不会受到影响。

如何获得规则

如果您已安装Requestly,则可以使用以下链接浏览和下载规则-https://app.requestly.io/rules/#sharedList/1600501411585-禁用缓存溢出

免责声明:我构建了Requestly,但我认为这可能对许多web开发人员有帮助,因此可以在这里共享。

6

如何使用书签来更改页面名称以防止页面缓存。在Chrome中,你可以创建一个新的书签,然后将代码粘贴到URL中。点击书签,页面将重新加载时间戳以阻止缓存。

javascript:(function(){var idx=location.href.indexOf('?');var d=new Date();var-str=location.ref.subtr(0,idx)+'?version='+d.获取时间();位置.href=str;void 0;})();
6

我只是被抓到了,但不一定是因为Chrome。

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

$.ajax(美元)({类型:'GET',缓存:true,....

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

我不知道这些数据保存在哪里,但我知道chrome从来没有向服务器发送过请求。

5

现在有一种更好更快的方法(Chrome版本59.x.x):

右键单击reload-icon(url字段的左侧),您会看到一个下拉菜单,选择第三个选项:“空缓存和硬重新加载”。

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

chrome web商店中有一个chrome扩展名为清除缓存.

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

非常非常好!

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

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

2

如果您正在使用服务人员(例如:对于Progressive web应用程序),您可能还需要在开发工具中的Application>Service Workers下选中“Update on reload”。

在此处输入图像描述

0
2

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

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

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

2

不确定您正在使用什么,但如果您正在使用ASP。网络上你可以做以下事情,这很有魅力:

<link href=“@Url.Content(”~/Content/Site.css“)[电子邮件保护]“rel=”stylesheet“/>

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

2
  • 绝对的。我使用了这个和条件编译,所以它不会出现在测试和发布版本中。 评论 2017年2月17日19:48
  • 更好的方法是使用css文件修改时间作为变量值。该解决方案也可以用于生产环境。它只是工作:)不知道它是如何在ASP中实现的,但在PHP中类似于这样的东西<link href=“style.css?time=<?PHP echo fileminfo('style.css');?>“rel=”stylesheet“> 评论 2017年10月30日8:32
2

我也遇到了同样的问题,我试着:

  • 控制换档R,
  • 禁用F12中的缓存
  • 控件F5。

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

1

自版本50以来(如果我没记错的话),“禁用缓存”选项已从Devtool设置中删除。转到“Network”(网络)选项卡,出现“Disable cache”(禁用缓存)选项。

1

“恼人”缓存的问题通常存在于框架中:)。让我们看看细节。大多数框架在.htaccess(os equivalent)中使用直接重定向所有请求到框架“index”,

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

(例如,对于.htaccess,典型指令为:

重写代码%{REQUEST_FILENAME}-d日重写代码%{REQUEST_FILENAME}-(f)重写代码%{REQUEST_FILENAME}-重写规则^(.+)$index.php?url=1美元[QSA,L]

)

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

这些文件通常在开发期间最常更改。

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

它应该放在.htaccess中。

F.e.用于开发过程:

标题集Cache-Control“无存储、无缓存、必须重新验证”标题集Pragma“no-cache”

(或者对于连续的工作版本,使用“Etag”指令-在HTTP引用中检查更多信息。注意,Etag不用于开发。

在.htaccess中,没有直接的方法生成随机数(或快速变化的序列,如日期UTC),以便在ETag中使用,因为正如我之前提到的那样,这并不是它的用途)。

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

1

我做了一个Chrome扩展禁用特定网站的浏览器缓存.

看一看,它叫缓存禁用程序。下面是它在实际中的表现:

“Cache Disabler”Chrome扩展的屏幕截图

有了它,你可以立即查看您的更改而不依赖于命中和未命中的Ctrl+刷新。

不缺少禁用缓存的Chrome扩展。然而缓存禁用程序与众不同的是它能够重新启动浏览器后保持并同步您的设置据我所知,没有其他扩展提供这种服务,这在开发网站时总是很受欢迎。

它是开源的,欢迎提供任何反馈!

0

嘿,如果您的站点正在使用PHP,那么请在html页面的开头放置以下PHP片段:

//开发版本控制-停止缓存$rand=兰特(199999999);

现在,只要在脚本或链接元素中加载CSS或JS文件之类的资源,就会在添加“?”之后将生成的随机值附加到请求URL通过PHP访问URI:

echo$rand;

就是这样!无论哪种浏览器,都不会再缓存你的网站了。

当然,在发布之前删除您的代码,或者只需将$rand设置为空字符串即可再次进行缓存。

0

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

“C:\Program Files(x86)\Google\Chrome\Application\Chrome.exe”--磁盘缓存大小=1-媒体缓存=1

我发现不禁用媒体缓存是个好主意,但出于完整性的考虑,它在这里。

实际上,我想要一个完全禁用缓存的选项,将内存用于IO而不是磁盘(这也会使加载时间加快10倍!)但我认为chrome或其他浏览器还没有这个选项。

0

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

不清楚你指的是哪个“缓存”。浏览器有几种不同的方法可以持久缓存内容。Web存储成为其中之一,控制缓存成为另一个。

一些浏览器还具有隐藏物,与一起使用服务工人,创建提供离线支持的Progressive Web Apps(PWA)。

清除PWA的缓存

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

要列出缓存密钥的名称,请运行:

self.caches.delete('mysite-cache')

按名称删除缓存密钥(即。,我的名片). 然后刷新页面。

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

navigator.serviceWorker.getRegistrations()然后(注册=>{registrations.forEach(注册=>{registration.unregister()}) })

不是你想要的答案吗?浏览标记的其他问题问你自己的问题.