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

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


当前回答

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

其他回答

还有两个选项可以永久禁用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的路径

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

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

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

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

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

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

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

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