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

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


当前回答

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

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

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

将此设置为false修复了我的问题,但这并不理想。

我不知道这些数据保存在何处,但我知道chrome从未在服务器上发出请求。

其他回答

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

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

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

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

当问到这个问题时,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开发人员有帮助,因此在这里分享。

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

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

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

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

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

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

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

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