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个回答
2095
Chrome DevTools可以禁用缓存。
  1. 右键单击并选择检查元素以打开DevTools。或使用以下键盘快捷键之一：
  • F12
  • Control+Shift+i
  • Command+Shift+i
  1. 点击工具栏中的网络以打开网络面板。
  2. 勾选顶部的禁用缓存复选框。

screenshot of development tools panel

记住，正如@ChromiumDev的tweet所述，此设置仅在开发工具打开时才生效。
请注意，这将导致所有资源被重新加载。如果您只想禁用某些资源的缓存，则可以修改服务器发送的HTTP标头。
如果您不想使用“禁用缓存”复选框，在开发工具打开的情况下长按刷新按钮将显示一个菜单，其中包含硬重载或清空缓存并强制重载选项，其效果类似。阅读区别选项以了解应选择哪个选项。以下快捷键可用：
  • Mac上的Command+Shift+R
  • Windows或Linux上的Control+Shift+R

long press

4
Mac 上强制刷新的快捷键是 Command + Shift + R。 - Mukarram Pasha
我发现在测试Amazon Cloudfront分发设置更改时，即使在DevTools中选择“禁用缓存”或使用“清空缓存并强制重新加载”，也无法生效。必须关闭隐身窗口，手动清除缓存，然后重新打开隐身窗口并重新输入URL才能看到更新，这非常不方便。 - alancc
不工作（Chrome 103，Mac）。我在并行开发多个应用程序，不断需要手动清除缓存。我不确定这个复选框是做什么的，但它根本不起作用。另一件事是，command+option+r 绝对不能清除缓存。是的，它重新加载页面而不使用缓存，但当您再次加载页面时，不使用选项键，您会得到旧的内容。我不得不开始使用两个不同的浏览器。对于我想要缓存的所有内容，我使用 Safari，这样我就可以手动清除 Chrome 缓存而不会伤害任何东西。 - MDickten
只有在开发工具打开时才能使用，这完全违背了消除 Web 开发缓存的目的。我已经将我的服务器与 VS Code 配合使用自动刷新和自动保存，但浏览器缓存非常糟糕。我不能每次编辑都点击刷新。一定有更好的办法。 - Joshua Robison
258

图片描述

当你需要每小时清除缓存30次时，清除缓存会让人非常烦恼。因此我安装了一个名为Classic Cache Killer的Chrome扩展程序，它可以在每次加载页面时清除缓存。

Chrome商店链接（免费） （现在没有恶意软件了！）

现在，我的Mock JSON、JavaScript、CSS、HTML和数据每次都会在每次加载页面时刷新。

我再也不用担心需要清除缓存了。

我找到了大约20个适用于Chrome浏览器的缓存清理工具，但这个看起来很轻量级且几乎不需要任何操作。在更新中，Cache Killer现在可以“始终开启”。

注意：我不认识这个插件作者。我只是觉得它有用。

4
是的，Chrome开发者工具选项在我的电脑上好像不起作用。但Cache Killer却非常有效。重新加载时间明显变慢了，大约4-5倍，但是新内容的呈现显然更快了。 - Bryce Johnson
3
清除缓存和禁用缓存只在本地Mac上有效。对于在线内容，我不断地刷新页面，希望能看到任何更改。这个扩展程序真是救星。 - Sbpro
3
我发现使用“禁用缓存”会导致本地存储出现问题，特别是在使用 Auth0 的 angular-storage 时。而“Cache Killer”可以完美地工作，并且不会对本地存储造成影响。 - trevorc
5
从Chrome扩展商店中移除，因为有恶意软件 :( 有替代方案吗？ - Semyon Vyskubov
6
最终我自己写了一个，功能相同但可以在每个选项卡之间切换。采用MIT许可证，保证不含恶意软件！https://github.com/themichaelyang/cache-clearer - Michael
显示剩余8条评论
205

重新加载菜单图片

  1. 按下F12键打开Chrome开发者控制台，然后：

  2. 右键单击（或按住左键）浏览器顶部的“重新加载”按钮，选择“清空缓存并强制刷新”。

这将超越“强制刷新”以完全清空缓存，确保任何通过JavaScript等下载的内容也避免使用缓存。您无需更改设置或进行任何操作，它是一个快速的1次性解决方案。

7
尽管我点击了那个重新加载按钮并尝试了各种键位组合，但它在苹果电脑上绝对不起作用。 - MJB
@ManirajSS：它将重新加载所有内容并避免使用缓存，但它不会重新下载页面加载后由JavaScript下载的内容。我不确定为什么有人会使用它，但我想你可能会想出一些角落案例，在那里它会很有用。 - JackArbiter
2
它也不会清除页面内部的iframe缓存。 - Pablo Mescher
7
不确定这个功能从何时开始存在，但在Chrome 41版本中，在Mac OS X系统上长按刷新按钮是有效的，前提是你打开了开发者工具窗口。 - Tim Keating
50

有两种方法可以彻底禁用Chrome页面缓存:

1. 在注册表中关闭Chrome缓存

打开注册表（开始 -> 命令 -> Regedit）

搜索: HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command

更改...chrom.exe"后面的部分为此值：–disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

示例: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

重要提示：

  • ...chrome.exe"后面有一个空格和一个连字符

  • 将chrome.exe的路径保留不变

  • 如果你复制这行，请确保引号是实际的引号。

2. 通过更改快捷方式属性来停用Chrome缓存

右键单击Chrome图标，选择上下文菜单中的“属性”。

将以下值添加到路径中：–disk-cache-size=1

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

重要提示：

  • 在...chrome.exe"后面有一个空格和一个连字符

  • 保留chrome.exe的路径不变

3
好的回答。虽然对于大多数人来说，禁用缓存只是在开发期间的临时操作。永久禁用它会显著降低正常浏览体验，并且这种做法不太好，因为它会给你访问的网络服务器带来不必要的负担。 - danielson317
4
我不同意所谓的网络不良公民行为，我们在这里讨论的是创造一些便于开发工作的快捷方式。所以在我看来，这绝对是最好的答案。只有一件小事。每次我从此 SO 页面复制到某个 Chrome 快捷方式中时，在 Windows 上会出现一些字符不正确的情况。以下是正确的字符："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-application-cache --media-cache-size=1 --disk-cache-size=1 另外，请问在 "%1" 前面的字符是什么？我不知道。 - peter.petrov
1
我正在寻找Chrome的CLI参数，以便在没有缓存的情况下启动它（用于CI目的）。这些似乎没有起作用。如果我加载一个页面，然后使用F5重新加载它（而不是Ctrl + F5），则仍然使用缓存。在过去的三年中，关于这些方面在Chromium上是否有任何变化？ - Gernot Raudner
1
刚刚发现 --media-cache-size 两年前已被移除：https://chromium-review.googlesource.com/c/chromium/src/+/1661077 - Gernot Raudner
34
如果您不希望编辑Chrome的设置，您可以使用隐身模式来达到相同的效果。
23
  1. 按下F12打开Chrome DevTools
  2. 按下F1打开DevTools设置
  3. 勾选如下所示的在DevTools打开期间禁用缓存:

此设置当前在首选项选项卡中，默认为显示。您可能需要向下滚动才能找到它。自此问题发布以来，此复选框至少已经移动了几次了。我最后检查时，它位于中间列的底部。如果您的屏幕较窄并且在首选项下有2列，则它可能靠近右上角。 如果该设置发生更改，请随时更新此帖子或进行评论，我将更新此帖子。

输入图像描述

2
这与直接在F12 Chrome开发工具中检查“禁用缓存”所做的事情相同，当您重新启动Chrome时它将重置。 - Bogdan Verbenets
22

除了在开发者工具窗口（Tools | Developer Tools）的右下角通过按钮获取的禁用缓存选项（或使用 Ctrl + Shift + I 快捷键），您现在还可以在开发人员工具的网络选项卡上右键单击并从弹出菜单中选择“清除缓存”。

18

不要按下 "F5" 按钮，而是按下：

"Ctrl + F5"

6
它在Firefox中也可以使用（这与此问题无关，但有人可能会发现它有用）。 - Donald Duck
17
在金丝雀通道（也许开发和稳定通道也会跟进），这是在“常规”部分左侧的第二个选项。

在Chrome Canary Channel禁用缓存

此外，还有通过Ctrl + Shift + N切换到无痕模式的选项。尽管不幸的是，这也会结束您的会话。

4
根据我的经验，这只在开发工具打开时才有效。当我关闭开发工具后，我惊讶地发现缓存仍然保存着页面，直到意识到这一点。奇怪的是，该设置不能覆盖所有内容。 - mbokil
隐身模式不幸地会缓存一些图片和文件。 - GobSmack
15

需要澄清的是，在Chrome浏览器中（从v15开始，包括v17），禁用缓存的复选框不在主设置界面中，而在开发人员工具设置界面中。

  1. 从浏览器窗口的扳手图标菜单（偏好设置菜单）中选择 "工具" → "开发人员工具"。

  2. 在出现的开发人员工具界面中，点击右下角的齿轮图标。

  3. 在 "网络" 部分中勾选 "禁用缓存" 复选框。

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