Chrome无法清除缓存

Question

我正在开发一个新网站，每当我更改CSS设置时，谷歌Chrome浏览器不会接受这些更改，除非我通过任务管理器完全关闭Chrome并重新启动它。我已经尝试了很多方法，以下是我尝试过的一些方法：

• 在CSS文件末尾使用PHP日期戳做版本控制
• 在开发者控制台中启用“在开发者窗口打开时清除缓存”
• 使用Ctrl + F5刷新并清除缓存
• 在应用程序中清除开发人员控制台中的存储数据
• 清理本地AppData中的缓存文件夹
• 删除CSS文件，刷新页面，然后重新添加CSS文件
• 使用无痕模式
• 向Chrome快捷方式添加启动选项--disk-cache-dir=null
• 添加浏览器插件以删除缓存

有人有任何想法可以帮助吗？每次我想检查CSS更改时关闭Chrome非常烦人且效率低下。 另一个麻烦之处在于我试图在浏览器中听音乐，所以如果我关闭Chrome，我必须回去再次播放我的音乐，而现在这个问题极其恼人，比我想象的更耗费时间。我已经查看了其他关于缓存突破以及Stack Overflow上的文章，但是我已经尝试了他们所建议的大多数方法，但还没有看到任何积极的结果。 大多数文章都说要在CSS文件末尾添加某种随机字符串或版本号作为GET请求，但是这似乎并没有起作用，尽管我知道这在过去曾经起过作用。

- AndyPet74

---

我同意，但现在关闭Chrome仍然非常低效（因为只是关闭并不会重置任何东西，因为一些进程仍在运行），然后等待它重新打开并返回页面以查看更改是否正确传递。每次我想更改CSS时都必须这样做。尝试使用开发人员工具中的CSS编辑器进行更改，然后首先在实际代码中进行更改并使所有内容完美运行很难。 - AndyPet74

在加载页面时，您可以在开发者控制台的网络选项卡下查看样式表请求是否显示“(from disk cache)”或“(from memory cache)”，以帮助我们缩小Chrome实际执行的范围。 - Mike

当我在网络选项卡中点击它并查看请求头时，它会显示以下内容：Cache-Control: No-cache和Pragma: no-cache，连接为Keep-alive。我没有看到任何文本显示(from disk cache)或(from memory cache)。 - AndyPet74

是的，这很烦人...根据我的经验，只有IE或Edge（最新版本）才能正确清除缓存（只要在设置中勾选“每次访问页面时刷新”）。这就是为什么我用IE进行开发工作的原因 - 我使用11，但9+也应该可以。现在所有浏览器都与其他主流浏览器兼容，所以您不必再过多担心异常情况。 - Tony Duffill

我现在不使用Edge/Explorer的主要原因是因为我曾经有一些旧项目在Explorer/Edge中无法正常工作，但在Firefox、Chrome或Safari中却可以正常运行。我会至少尝试一下CSS，看看是否能解决问题。我已经安装了IE 11，所以我会试一试，看看是否能解决问题。 - AndyPet74

Internet Explorer 似乎也不会立即生效，除非我关闭并重新打开它。我确保在我的设置中，每次访问时都会刷新，而不是自动刷新。 - AndyPet74

Answer 1

按 F12 > F1 > network > 在开发者工具打开的情况下禁用缓存。这应该可以解决你的问题。

- Pizza lord

---

你使用的是哪个版本的Chrome浏览器？ - Pizza lord

版本号为 55.0.2883.87 m。 - AndyPet74

看起来这是一个Chrome的bug。 - Pizza lord

这基本上就是我目前正在编写的内容。我已经尝试了我能想到或在互联网上找到的所有方法。 - AndyPet74

虽然这可能适用于大多数人，但OP已经明确表示他已经尝试过了。请参考@AndyPet74在下面的答案，那里有解决方案，它帮助了我。 - Dan

@Dan 当我发布我的答案时，OP还没有尝试过，既然它对大多数人有效，我会保留它。 - Pizza lord

Answer 2

开发服务器有许多缓存工具在运行，尽管它们应该被关闭。禁用它们后，Chrome的性能得到了提升，大部分情况下按下CTRL+F5就能搞定。

- AndyPet74

---

来到这里是因为我遇到了同样的问题，让我感到非常烦恼 - 这个答案需要更高的评价和标记 - 在解决我的个人问题之后发现了这个 - https://dev59.com/42Ik5IYBdhLWcg3wqPsi - Dan

Answer 3

"清除缓存"并不像它应该的那么简单。我发现，与其在浏览器上清除缓存，不如"触碰"服务器文件缓存。这实际上会更改服务器上源文件缓存的日期和时间（在Edge、Chrome和Firefox上进行了测试），大多数浏览器将自动下载最新的服务器上的内容（代码、图形及任何多媒体）。我建议您在程序运行之前只需复制服务器上最新的脚本，并使用"触碰"解决方案，以便将所有问题文件的日期更改为最新的日期和时间，然后将其下载到您的浏览器中：

  <?php
    touch('/www/sample/file1.css');
    touch('/www/sample/file2.css');
    touch('/www/sample/file2.css');
   ?>

然后...你程序的其余部分...

我花了一些时间来解决这个问题（因为许多浏览器对不同的命令有不同的反应，但它们都会检查文件的时间，并将其与您在浏览器中下载的副本进行比较，如果日期和时间不同，则会刷新），如果您不能按照预期的正确方式进行，总有另一个可用且更好的解决方案。最好的问候和愉快的露营。顺便说一下，touch()或其他替代方法适用于许多编程语言，包括javascript bash sh php，您可以在html中包含或调用它们。

- Luis H Cabrejo

Answer 4

我曾经遇到过同样的问题，我认为这是Chrome浏览器中一个(非常烦人的)bug。你可以使用CSS Reloader Chrome Extension来解决它。虽然不是最理想的方法，但比较好用。

- Stormhashe

---

它似乎不起作用。像所有其他方法一样，它仍然显示比当前网页服务器上的CSS旧的版本。我正在查看开发人员工具中的网络选项卡，它显示插件加载了一个新版本，但它有与页面上当前CSS版本相同的所有CSS。 - AndyPet74

Answer 5

如果您正在尝试新的CSS更新，我建议使用Chrome的“检查”功能动态更新CSS设置并交互式地观察结果。与仅进行手动编辑相比，这可能会在更新周期中节省一些时间。

另一个尝试的选项是在头部区域定义“cache-control”元标记。对于开发/测试，您可能希望没有缓存。对于真实网站，您可能希望有更短的年龄限制。请参考以下SO Q&A。 使用元标记在所有浏览器中关闭缓存？

- JohnH

---

这基本上就是我一直在做的，但这仍然是一个极其烦人的问题，因为当我找到新的符合要求的CSS设置并更改HTML/PHP时，我必须刷新页面才能看到它们，而且它会回到破碎的CSS状态，直到我花几分钟去重新设置那些CSS值。 - AndyPet74

这是这一行吗：<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> - AndyPet74

是的，这是SO链接中引用的几个元标记之一。 - JohnH

我相当确定这可能只是一个Chrome浏览器的问题。不过也不能确定。 - AndyPet74