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

Question

我正在修改网站的外观（CSS修改）但由于烦人的持久缓存而无法在Chrome上看到结果。我试过 Shift +刷新但它不起作用。

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

Answer 1

Chrome DevTools可以禁用缓存。

1. 右键单击并选择Inspect Element以打开DevTools。或者使用以下keyboard shortcuts：
   • F12
   Mac上的
   • 命令 + 选项 + i
   在Windows或Linux上
   • 控制 + Shift + i
2. 点击工具栏中的 Network以打开网络窗格。
3. 检查顶部的Disable cache复选框。



请注意，正如来自tweet的@ChromiumDev所述，此设置仅在devtools打开时才有效。

请注意，这将导致重新加载所有资源。如果您只想为某些资源禁用缓存，则可以modify the HTTP header将服务器与文件一起发送。

如果您不想使用Disable cache复选框，则长按“打开DevTools 的刷新按钮会显示一个菜单，其中包含选项Hard Reload或Empty Cache and Hard Reload应具有类似的效果。阅读difference between the options。可以使用以下快捷方式：

Mac上的
• 命令 + 选项 + R
在Windows或Linux上
• 控制 + Shift + R

Answer 2

当您需要每小时清理缓存30次时清除缓存太烦人了。所以我安装了一个名为经典缓存杀手的Chrome扩展程序，可以在每次加载页面时清除缓存。

Chrome Store Link (free) （现在没有恶意软件！）

现在我的模拟json，javascript，css，html和数据会在每次加载每页 >时刷新 。

如果我需要清除缓存，永远不必担心。

我找到了大约20个用于Chrome的缓存清理程序，但这个看起来很轻巧且省力。在更新中，Cache Killer现在可以“始终开启”。

注意：我不知道插件作者的任何方式。我发现它很有用。

Answer 3

1. 按 F12 然后（打开控制台）拉起Chrome开发者控制台：

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

这将超出“Hard Reload”以完全清空缓存，确保通过javascript等下载的任何内容也将避免使用缓存。你不必弄乱设置或任何东西，这是一个快速的一次性解决方案。

Answer 4

在Chrome中禁用页面缓存还有两个选项：

<强> 1。停用注册表中的Chrome缓存

打开注册表（开始 - ＆gt;命令 - ＆gt; 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的路径，因为它是

Answer 5

如果您不想修改Chrome的设置，可以使用隐身模式获得相同的结果。

Answer 6

除了禁用缓存选项（您可以通过开发人员工具窗口右下角的按钮 - 工具|开发人员工具，或 Ctrl + Shift < / kbd> + I ），在开发人员工具的网络面板上，您现在可以右键单击并从弹出菜单中选择“清除缓存”。

Answer 7

1. F12 打开Chrome DevTools
2. F1 打开DevTools设置
3. 检查禁用缓存（当DevTools打开时），如下所示：

目前位于偏好设置标签上，这是默认设置。您可能需要向下滚动。自提出此问题以来，此复选框已至少移动了几次。最后我查了一下，它位于底部的中间栏。如果您在较薄的屏幕上打开并且“首选项”下有2列，则它可能位于右上角附近。如果更改或评论，请随时更新此帖子，我将更新帖子。

Answer 8

而不是击中“F5” 刚刚点击：

  

“Ctrl + F5”

Answer 9

在Canary频道（可能还有开发和稳定频道）可以在“常规”部分的左侧找到整体的第二个选项。

除此之外，总是可以选择通过Ctrl + Shift + N切换到隐身模式。即使不幸的是，也会结束你的会话。

Answer 10

使用 Ctrl + Shift + R 进行刷新很不错，但没有得到我需要的一切。 仍然有些东西不会刷新，比如存储在js和css中的数据。 找到了解决方案：toolbar of google for chrome web developers。安装工具栏后，选择选项和“重置页面”。

Answer 11

要清楚，Chrome中的禁用缓存复选框（此处为v17，但我认为是v15）不在主设置界面中。它位于开发人员工具设置UI中。

1. 从浏览器窗口的扳手图标菜单（首选项菜单）中选择工具→开发者工具

2. 在显示的开发者工具用户界面中，点击右下方的齿轮图标。

3. 选中＆＃39;停用缓存＆＃39; “网络”部分中的复选框。

Answer 12

仅在启用开发工具

时，才能在chrome中禁用缓存

Answer 13

在修复错误之前，您可以使用Clear Cache Chrome插件，还可以为其设置键盘快捷键。

安装后，右键单击并转到选项：

检查Automatically reload active tab after clearing data：

为时间段选择Everything：

然后你可以去Menu =＆gt;工具=＆gt;扩展：

点击底部的键盘快捷键：

并设置键盘快捷键，例如 Ctrl + Shift + R ：

Answer 14

实际上，如果您不介意使用带宽，则由于多种原因更加安全，禁用缓存并被许多安全站点建议。

Chromium不应该傲慢，无法做出决定并对用户实施设置。

您可以使用--disk-cache-dir = / dev / null。

在UNIX上禁用缓存

由于这是意外的崩溃可能会发生，但如果他们这样做，则会明确指出一个更严重的错误，无论如何都应该修复。

Answer 15

这可能对某人有所帮助。

我已经操纵了我的Nginx用于疯狂缓存。因此，禁用网络工具中的缓存并明确清除缓存不起作用。

一个非常简单但又无聊的解决方法是，我只是打开一个新的隐身标签。令人惊讶的是它一直都有效！

隐身模式下的硬刷新功能随时可以在同一模式下重新加载。

Answer 16

如何更改页面名称以防止页面缓存的书签。在Chrome中，您可以创建新书签，然后将代码粘贴到网址中。单击书签，页面将重新加载时间戳以阻止缓存。

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;})();

Answer 17

我刚被抓出来，但不一定是因为Chrome。

我正在使用jQuery来发出AJAX请求。我在请求中将cache属性设置为true：

   $.ajax({
        type: 'GET',
        cache: true,
        ....

将此设置为 false 修复了我的问题，但这并不理想。

我不知道这些数据的保存位置，但我知道Chrome从未到达服务器请求。

Answer 18

现在有更好更快的方法（Chrome版本59.x.x.）：

右键单击reload-icon（url-field的左侧），然后出现一个下拉菜单，选择第三个选项：'empty cache and Hard reload'。

此选项仅在开发人员工具处于打开状态时可用。 （注意与选项2的区别：'硬重载'-cmd-shift-R）。没有缓存在这里排空！

Answer 19

Chrome网上商店中有一个名为Clear Cache的Chrome扩展程序。

我每天都使用它，这是我认为非常有用的工具。您可以将其用作重新加载按钮，并可以清除缓存，如果您还喜欢cookie，区域设置存储，表单数据等。您还可以定义发生这种情况的域。因此，只需重新加载按钮即可清除所有这些内容，无论如何必须按 - 在您选择的域上。

非常好！

您还可以在选项中为此定义键盘快捷键！

另一种方法是以隐身模式启动Chrome窗口。 此处缓存也应完全禁用。

Answer 20

我有同样的问题，我试过了：

• Control Shift R，
• 在F12中禁用缓存
• 控制F5。

然后我发现不推荐使用。非https网站的.appcache清单。 我删除了我的site.appcache文件及其在html标签中的引用，现在我看到了每个页面的最新版本！

Answer 21

不确定您使用的是什么，但如果您使用的是ASP.Net，则可以执行以下操作，就像魅力一样：

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

基本上它会在每次运行时自动将日期和时间附加到文件的末尾，这意味着由于文件名在技术上不同，所以您永远不必担心它会再次缓存。

Answer 22

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

此外，该扩展程序可以方便快捷地报告网页的页面大小，缓存使用情况，网络请求和加载时间。加上Github的开源。

Answer 23

如果您使用的是 ServiceWorkers （例如：对于渐进式Web应用程序），则可能还需要在开发工具中的“应用程序”>“服务工作者”下选中“重新加载时更新”。

Answer 24

询问此问题时，Chrome不支持“禁用缓存”功能。但是现在，您可以在Chrome开发者工具的“网络”标签中找到“禁用缓存”功能。

禁用了缓存的网络标签

您可以看到所有资源（我已经过滤了JS资源）已经从网络中获取，而不是从磁盘/内存缓存中加载。

未选择禁用缓存

您可以看到，当我刷新页面但未选择“禁用缓存”功能时，几乎所有资源都是从缓存加载的。

这对于本地Web开发很好，但是我要强调一些限制。如果到目前为止讨论的解决方案符合您的用例，您可以在这里停止阅读。

限制

1. 您必须保持DevTools处于打开状态并禁用缓存
2. 禁用缓存时，该选项卡中的所有资源均被禁用。如果您只想禁用1-2个资源的缓存，则会使事情变慢并且效率很低

使用Requestly Chrome Extension禁用特定资源（JS / CSS /图像等）的缓存

最近，我偶然发现了https://medium.com/weekly-webtips/how-to-disable-caching-of-particular-js-css-file-84a93d005172，它帮助我了解了如何为特定资源禁用缓存。

这里的窍门是每次发出请求时，向您的资源中添加一个带有随机值的查询参数。使用请求查询参数规则，您可以添加这样的参数

URL Contains mywebsite.com/myresource.js
Add param cb rq_rand(4)

发出请求时，

rq_rand（4）被4位随机数替换。

请求查询参数规则以添加随机参数

添加规则后，不缓存JS / CSS文件

在这里您可以看到由于URL中的随机参数（cb-将其读取为缓存无效化程序），因此未选择“禁用缓存”，并且仍未从缓存加载资源。

1. 好处是您无需为了这种行为而保持开发工具开放
2. 您可以将其永久打开，并且浏览体验也不会受到影响。

如何获取规则

如果您已按要求安装-https://app.requestly.io/rules/#sharedList/1600501411585-disable-cache-stackoverflow

，请点击以下链接浏览并下载规则

免责声明：我创建了Requestly，但是我认为这可能对许多Web开发人员有所帮助，因此请在此处共享。

Answer 25

  

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

目前还不清楚你指的是哪个“缓存”。浏览器可以持续缓存内容有几种不同的方法。 Web Storage是其中之一，Cache-Control是另一个。

某些浏览器还有一个Cache，与Service Workers结合使用，可以创建提供离线支持的渐进式网络应用程序（PWA）。

清除PWA的缓存

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

列出缓存键的名称，然后运行：

self.caches.delete('my-site-cache')

按名称删除缓存密钥（即my-site-cache）。然后刷新页面。

如果您在刷新后在控制台中发现任何与工作人员相关的错误，则可能还需要取消注册已注册的工作人员：

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

Answer 26

我遇到的情况是浏览器从磁盘加载缓存数据，即使我检查了它已禁用缓存（我使用的是Chrome）。我的所有css和js都是从​​服务器而不是网页加载的。这发生在我的本地和制作上。

要修复它，我需要在我的网址中添加一个额外的参数来强制浏览器从服务器获取网页，即使控制器也不需要它。

我使用的是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

这是我的情况和解决方案。希望它可以帮助某人。

Answer 27

“烦人”的缓存问题通常存在于框架中:)。让我们看看细节。 大多数框架使用 .htaccess（操作系统等效）指令将所有请求重定向到框架“索引”，

但同时 EXCLUDE 应用程序直接请求的文件和目录。

（例如 .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 中没有直接的方法来生成随机数（或快速变化的序列，如日期 UTC）以在 ETag 中使用，因为 - 正如我之前提到的 - 这不是所提供的）。

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

Answer 28

将这段代码添加到您的身上，它应该可以解决问题。

<meta name="robots" content="noarchive">

Answer 29

Chrome的缓存杀手是目前最好的选择。由于安装缓存杀手的商店URL已关闭，您可以在此处下载CRX文件：

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

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

Answer 30

从版本50开始（如果我没记错的话），从“开发工具设置”中删除了“禁用缓存”选项。转到“网络”选项卡，然后是“禁用缓存”选项。

Answer 31

我使用了上面描述的其他选项，但我发现最好将以下参数添加到chrome.exe的启动中。

“C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe”--disk-cache-size = 1 -media缓存= 1

我发现不禁用媒体缓存是一个好主意，但它是为了完整起见。

实际上我想要一个完全禁用缓存的选项，将内存用于IO而不是我的磁盘（这会使加载时间也快10倍！）但是我不认为chrome或任何浏览器都有这个问题那个选项。

Answer 32

如果您的网站使用的是PHP，请在html页面的开头放置一些小小的PHP代码段：

   //dev versioning - stop caching
   $rand = rand(1, 99999999);

现在，无论您在脚本或链接元素中加载CSS或JS文件等资源，都会在追加“？”之后将生成的随机值附加到请求网址中。通过PHP到URI：

    echo $rand;

多数民众赞成！将来没有浏览器可以缓存您的网站 - 无论哪种类型。

当然，在发布之前删除你的代码，或者只是将$ rand设置为空字符串以允许再次进行缓存。

Answer 33

我使用（在Windows中），Ctrl + Shift +删除，然后在Chrome对话框出现时，按Enter键。可以配置每次执行此序列时需要清除的内容。无需开发。在这种情况下会打开工具。