logo标签列表

禁用Chrome缓存以进行网站开发

google-chromecachingbrowsergoogle-chrome-devtoolsbrowser-cache
1725

我正在修改一个网站的外观（CSS 修改），但由于令人恼火的持久缓存，无法在 Chrome 上看到结果。我尝试过 Shift+ 刷新，但它没有起作用。

我该如何暂时禁用缓存或以某种方式刷新页面，以便能够看到更改？

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个回答
3
如果您正在使用ServiceWorkers（例如：用于渐进式Web应用程序），那么您可能需要在开发工具中的应用程序> Service Workers下勾选“重新加载时更新”。
2

我的第三个Chrome扩展程序Page Size Inspector提供了另一种禁用缓存的选项，与Devtools完全相同。

此外，该扩展程序以方便的方式快速报告网页的页面大小、缓存使用情况、网络请求和加载时间。此外，它在Github是开源的。

Screenshot - Page Size Inspector

2

我有同样的问题，我尝试了以下方法：

  • 按下Control Shift R键
  • 在F12中禁用缓存
  • 按下Control F5键

然后我发现，在非https网站上使用.appcache清单已经被弃用。我删除了我的site.appcache文件以及html标签中对它的引用，现在我可以看到每个页面的最新版本！

2

不确定你在使用什么，但如果你在使用ASP.Net，你可以按照以下步骤操作，这个方法非常好用：

<link href="@Url.Content("~/Content/Site.css")?time=@DateTime.Now" rel="stylesheet" />

基本上，每次运行它时都会自动将日期和时间附加到文件末尾，这意味着由于文件名在技术上是不同的，您永远不必担心它再次被缓存。
当然。我使用了这个，并且使用条件编译，所以它不会出现在测试和发布版本中。 - Cee McSharpface
更好的方法是使用CSS文件修改时间作为变量值。这个解决方案也可以在生产环境中使用。它只是有效的 :) 不确定ASP中如何实现，但在PHP中可以像这样做：<link href="style.css?time=<?php echo fileminfo('style.css');?>" rel="stylesheet">。 - Oliver Manner
1
问题在于通常的“烦人”缓存存在于框架中 : )。让我们看看细节。 大多数框架使用 .htaccess（os 等效）指令将所有请求重定向到框架的“索引”， 但同时排除应用程序直接请求的文件和目录。 （例如，对于 .htaccess 的典型指令是：）
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]

)

因此，所有的.js、.css文件以及图形文件都不受框架“index”的处理。
这些文件通常在开发过程中经常更改。
这就是为什么缓存控制指令不应该放在框架“index”中的原因。
它应该放在.htaccess中。
例如，在开发过程中使用：
  Header set Cache-Control "no-store, no-cache, must-revalidate"
  Header set Pragma "no-cache"
< p >（或者对于连续的工作版本，使用“Etag”指令-在HTTP参考中查看更多。请注意，ETag不适用于开发。

在.htaccess中，没有直接的方法生成随机数（或快速更改的序列，如UTC日期）以用于ETag，因为-如我之前所述-这不是提供的目的）。

希望它有所帮助并节省时间。

1
自版本50（如果我记得正确的话），“禁用缓存”选项已从Devtool设置中删除。转到“网络”选项卡，那里有“禁用缓存”选项。
0
我遇到了一个问题，即使我禁用了缓存（我使用的是Chrome），浏览器仍从磁盘加载缓存数据。我的所有CSS和JS都是从服务器加载，但网页没有。这在我的本地和生产环境中都发生了。
为了解决这个问题，我需要在URL中添加一个额外的参数，强制浏览器从服务器获取网页，即使控制器不需要它。
我使用ASP.Net，以下是我的示例：
//Controller function
public ActionResult Index()
    {
        return View();
    }
//Link
@Html.Action("Index", "Home", new { ts = DateTime.Now.Ticks.ToString()})

结果是，它将生成一个链接，如下： http://www.myweb.com/Home/Index?ts=636558555408282209

这是我的情况和解决方案。希望能对某些人有所帮助。

0
我做了一个Chrome扩展程序，可以禁用特定网站的浏览器缓存。
看一下吧 - 它叫做Cache Disabler。这是它的实际效果：

Screenshot of “Cache Disabler” Chrome extension

使用它，你可以立即看到你的更改，而不需要依赖于不确定的Ctrl+刷新。
Chrome扩展程序中没有缺少禁用缓存的选项。然而，Cache Disabler的独特之处在于它能够在浏览器重新启动后保持和同步你的设置。据我所知，没有其他扩展程序能够提供这样的功能，这在开发网站时总是受到赞赏的。 它是开源的，欢迎任何反馈！
0

我已经尝试了上述其他选项，但我发现最好的方法是在chrome.exe启动时添加以下参数：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disk-cache-size=1 -media-cache=1

我认为不禁用媒体缓存是一个好主意，但这里是为了完整起见。

实际上，我想要一个完全禁用缓存的选项，使用内存代替磁盘进行IO操作（这也会使加载时间快10倍！），但我认为目前Chrome或任何浏览器都没有这个选项。

0

Chrome的缓存清除器是目前最好的选择。由于商店安装缓存清除器的URL已经失效，您可以在此处下载CRX文件：

https://www.crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap/

下载扩展文件后，打开Chrome -> 更多工具 -> 扩展程序，然后将CRX文件从文件资源管理器或桌面（取决于您下载文件的位置）拖到Chrome窗口中以安装扩展。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接