我正在修改一个网站的外观（CSS 修改），但由于令人恼火的持久缓存，无法在 Chrome 上看到结果。我尝试过 Shift+ 刷新，但它没有起作用。
我该如何暂时禁用缓存或以某种方式刷新页面，以便能够看到更改？
禁用Chrome缓存以进行网站开发
1725
- tomermes
10
207这可能是Chrome最糟糕的一个问题。我浪费了太多时间琢磨为什么东西出错了，只发现即使使用^F5强制完全重新加载页面，它仍然使用一个过时的、一个小时前的资源。 - Glenn Maynard
51浏览器应该缓存。请记住，您的用户也会进行缓存，因此可能无法看到您在网站上线后所做的更改。避免这种情况的方法是对文件进行版本控制。例如：my_css.css?version=something_unique。如果浏览器之前没有见过这个版本，则会再次下载文件。something_unique可以是最后修改日期等内容。 - user984003
40@user984003，“Ctrl+Shift+R”或“Shift+R”应该清空缓存... - Adonis K. Kakoulidis
23如果我告诉他们不要缓存，就不会缓存。是的，对于最终发布，一个破坏缓存的版本号非常好，因为用户正在使用它，但是当我构建新站点并希望在开发过程中看到增量更改时，我不会每次更改版本号。这就是为什么我使用 Firefox 进行开发的原因 - 它有最可靠的禁用缓存选项！ - andrewb
15是的，浏览器在浏览时会缓存...。但在开发时，你需要更多地控制它。 - ahnbizcad
显示剩余5条评论
35个回答
14
使用Ctrl+Shift+R刷新网页虽好用，但并不能更新所有内容，如存储在js和css中的数据。我找到了一个解决方案：使用Chrome网页开发者工具栏，安装后选择选项并点击“重置页面”。
- tomermes
1
2+1. 尽管如此仍不完美：对于在本地计算机上开发，缓存是完全不必要的，并且会引入问题，因此我仍然对像Firebug一样具有禁用功能感兴趣。 - c089
14
在Chrome中禁用缓存只有在您打开开发工具时才有效。
- jamiescript
1
也许这是一个bug，或者只是为开发人员准备的 - 话说非开发人员也会喜欢使用禁用缓存选项 ¯\(ツ)/¯ - jamiescript
14
在错误修复之前，您可以使用Clear Cache Chrome插件，并且还可以为其设置键盘快捷方式。
安装后，请右键单击并转到选项：
请勾选 清除数据后自动重新加载活动选项卡：
选择时间段为全部：
然后，您可以转到 菜单 => 工具 => 扩展：
在底部点击键盘快捷键：
请设置您的键盘快捷键，例如 Ctrl + Shift +R：
- Răzvan Flavius Panda
9
实际上，如果您不介意使用带宽，出于多种原因禁用缓存更加安全，这是许多安全网站建议的。
Chromium不应该傲慢到强制用户做出决定和设置。
您可以在UNIX上通过 --disk-cache-dir=/dev/null 禁用缓存。
由于这是意外情况，可能会发生崩溃，但如果发生了这种情况，那么这将明确指向一个更严重的错误，无论如何都应该修复。
- Kevin Chadwick
8
这可能对某些人有所帮助。
我已经为我的Nginx配置了疯狂的缓存。因此，在网络工具中禁用缓存和明确清除缓存都不起作用。
一个非常简单但乏味的解决方法是，我只需打开一个新的无痕模式标签页。令人惊讶的是，它总是有效！
在无痕模式下进行硬刷新，每次都能达到重载的效果。
- KhoPhi
8
当这个问题被提出时，Chrome不支持禁用缓存的功能。但是现在，你可以在Chrome Dev Tools的Network选项卡中找到“禁用缓存”功能。
这对本地Web开发很有效，但还有一些限制需要强调。如果到目前为止讨论的解决方案符合您的使用情况，那么您可以停止阅读。
限制：
最近，我偶然发现了https://dev.to/requestlyio/disable-caching-of-particular-js-css-file-2k82，它帮助我了解如何禁用特定资源的缓存。
这里的技巧是在每次请求时向您的资源添加一个带有随机值的查询参数。使用Requestly Query Param Rule，您可以添加如下参数。
禁用缓存的网络选项卡
未选择禁用缓存
这对本地Web开发很有效，但还有一些限制需要强调。如果到目前为止讨论的解决方案符合您的使用情况，那么您可以停止阅读。
限制：
- 您必须保持DevTools打开和禁用Cache已选中
- 禁用缓存后，该选项会对该选项卡中的所有资源禁用缓存。如果您只想禁用1-2个资源的缓存，则会使事情变慢且效率低下。
最近，我偶然发现了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位随机数。
用于添加随机参数的Requestly查询参数规则
添加规则后，JS/CSS文件未被缓存
- 好消息是您无需保持开发工具处于打开状态即可获得此行为
- 您可以将其永久保留，并且您的浏览体验也不会受到影响。
如何获取规则
如果您已安装Requestly，则可以使用以下链接浏览和下载规则- https://app.requestly.io/rules/#sharedList/1600501411585-disable-cache-stackoverflow
免责声明：我建立了Requestly，但我认为这可能对许多Web开发人员有所帮助，因此在此分享。
- Sachin Jain
6
我刚刚被抓住了，但这并不一定是由于 Chrome。
我正在使用 jQuery 进行 AJAX 请求。在请求中，我将缓存属性设置为 true：
$.ajax({
type: 'GET',
cache: true,
....
将其设置为false解决了我的问题，但这并不理想。
我不知道这些数据保存在哪里，但我知道Chrome从未向服务器发送请求。
- DynamicDan
6
如何创建一个书签脚本来更改页面名称，以防止页面缓存。在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;})();
- mbokil
5
现在有更好更快的方法（Chrome版本59.x.x.）：
右键单击重新加载图标（位于URL字段左侧），然后您将获得一个下拉菜单，选择第三个选项：“清空缓存并强制重新加载”。
此选项仅在开发人员工具打开时可用。 （注意与选项2：“强制重新加载”-cmd-shift-R的区别）。这里不清空缓存！
右键单击重新加载图标（位于URL字段左侧），然后您将获得一个下拉菜单，选择第三个选项：“清空缓存并强制重新加载”。
此选项仅在开发人员工具打开时可用。 （注意与选项2：“强制重新加载”-cmd-shift-R的区别）。这里不清空缓存！
- Luftwaffle
3
在Chrome网上应用商店中有一个名为Clear Cache的扩展程序。
我每天都使用它，我认为这是一个非常有用的工具。您可以将其用作重新加载按钮，并清除缓存，如果需要还可以清除cookie、本地存储、表单数据等。此外，您还可以定义发生在哪个域名上。因此，在您选择的域名上，只需按下重新加载按钮即可清除所有这些东西。
非常好用！
您还可以在选项中定义此操作的键盘快捷方式！
另一种方法是在隐身模式下启动Chrome窗口。在这里，缓存也应该完全禁用。
- chris
2
找不到定义在哪个域上的选项。看起来不太好。那么 https://chrome.google.com/webstore/detail/cache-killer/jpfbieopdmepaolggioebjmedmclkbap/ 怎么样？ - nkkollaw
在浏览器中前往清除缓存图标，右键点击，选择选项，然后在Cookie下方找到一个小设置图标。 - chris
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接