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

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


当前回答

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

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

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

其他回答

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

Chrome DevTools可以禁用缓存。

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

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

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

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

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

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

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

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

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

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

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

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

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