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

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


使用Ctrl+Shift+R进行刷新很好,但并没有得到所需的一切。还有一些东西不会刷新,比如存储在js和css中的数据。找到了一个解决方案:谷歌为chromeweb开发人员提供的工具栏。安装工具栏后,选择选项并“重置页面”。


Chrome DevTools可以禁用缓存。

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

第12页控制+Shift+i命令+Shift+i

单击工具栏中的网络以打开网络窗格。选中顶部的禁用缓存复选框。

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

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

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

Mac上的Command+Shift+RWindows或Linux上的Control+Shift+R


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


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

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


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

除此之外,始终可以通过Ctrl+Shift+N切换到隐姓埋名模式,即使不幸的是,这也会结束您的会话。


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

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

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

如果我需要清空缓存,我永远不用担心。

我找到了大约20个用于Chrome的缓存清理器,但这一个似乎很轻,而且不费吹灰之力。在更新中,Cache Killer现在可以保持“始终打开”。

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


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


chrome web商店中有一个名为Clear Cache的chrome扩展。

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

非常好!

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

另一种方法是在隐姓埋名模式下启动铬窗口。在这里,缓存也应该被完全禁用。


如何使用书签来更改页面名称以防止页面缓存。在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”设置为该值:–禁用应用程序缓存–媒体缓存大小=1–磁盘缓存大小=1-“%1”

示例:“C:\Program Files(x86)\Google\Chrome\Application\Chrome.exe”-禁用应用程序缓存–媒体缓存大小=1–磁盘缓存大小=1-“%1”

重要:

后面有空格和连字符。。。chrome.exe“保留chrome.exe的路径如果复制该行,请确保检查引号是否为实际引号。

2.通过更改快捷方式财产来停用Chrome缓存

右键单击Chrome图标并在上下文菜单中选择“财产”。将以下值添加到路径:–磁盘缓存大小=1

例子:“C:\Program Files(x86)\Google\Chrome\Application\Chrome.exe”–磁盘缓存大小=1

重要:

后面有空格和连字符。。。chrome.exe“保留chrome.exe的路径


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

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

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

选择时间段的所有内容:

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

单击底部的键盘快捷键:

并设置键盘快捷键,例如Ctrl+Shift+R:


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

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

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

由于这是意外的,所以可能会发生崩溃,但如果发生了,那么这将明确指出一个更严重的错误,在任何情况下都应该修复。


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

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

现在,在脚本或链接元素中加载CSS或JS文件等资源的任何地方,都会在附加“?”后将生成的随机值附加到请求URL通过PHP连接到URI:

    echo $rand;

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

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


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

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


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


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

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

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

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


F12打开Chrome DevToolsF1打开DevTools设置选中禁用缓存(当DevTools打开时),如下所示:

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


从版本50开始(如果我没记错的话),“禁用缓存”选项从Devtool设置中删除。转到“网络”选项卡,有“禁用缓存”选项。


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

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


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

“Ctrl+F5”


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

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

一个非常简单但无聊的解决方法是,我只是打开了一个新的匿名标签。令人惊讶的是,它一直都在工作!

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


不确定您正在使用什么,但如果您正在使用ASP.Net,您可以执行以下操作,这就像一个魅力:

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

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


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

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

一些浏览器还具有缓存,与服务工作者一起使用,以创建提供离线支持的渐进式Web应用程序(PWA)。

清除PWA的缓存

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

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

self.caches.delete('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)。这里没有清空缓存!


将这串代码添加到您的中,它应该会成功。

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

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

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

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


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

这是我的处境和解决方案。希望它能帮助一些人。


我使用(在窗口中)ctrl+shift+delete,当铬对话框出现时,按enter键。这可以配置为每次执行此序列时需要清除的内容。在这种情况下,不需要打开dev.tools。


如果您使用的是ServiceWorkers(例如,对于Progressive web应用程序),您可能也需要在开发工具中的应用程序>ServiceWorkers下选中“重新加载时更新”。


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

禁用缓存的网络选项卡

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

未选择禁用缓存

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

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

局限性

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

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

最近,我偶然发现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-将其作为缓存破坏器读取),资源仍然没有从缓存加载。

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

如何获取规则

这是一个链接,如果您已安装Requestly,则可以使用该链接浏览和下载规则-https://app.requestly.io/rules/#sharedList/1600501411585-禁用缓存堆栈流

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


一般来说,“烦人”的缓存的问题在于框架:)。让我们来看看细节。大多数框架都在.htaccess(os equivalent)中使用去主动重定向所有请求到框架“索引”,

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

(例如,对于.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中,没有直接的方法生成用于ETag的随机数(或快速变化的序列,如日期UTC),因为-正如我之前提到的-这不是提供的)。

希望这有助于节省时间。


为了使用Chromium在VS代码中进行调试,我将--aggresive缓存丢弃的runtimeArgs添加到launch.json文件中。这消除了所有缓存。刷新时立即显示代码更改。