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

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


当前回答

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

其他回答

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

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

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

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

一般来说,“烦人”的缓存的问题在于框架:)。让我们来看看细节。大多数框架都在.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),因为-正如我之前提到的-这不是提供的)。

希望这有助于节省时间。

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

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