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

Question

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

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

Answer 1

Chrome DevTools可以禁用缓存.

1. 右键单击并选择Inspect Element打开DevTools.或使用以下键盘快捷键:
   • F12
   • Command在Mac上+ Option+i
   • ControlWindows或Linux上的+ Shift+i
2. 单击 Network工具栏中的以打开网络窗格.
3. 选中Disable cache顶部的复选框.

请记住,作为一个鸣叫从@ChromiumDev指出,该设置是只由当devtools是开放的.

请注意,这将导致重新加载所有资源.如果您希望仅为某些资源禁用缓存,则可以修改服务器与文件一起发送的HTTP标头.

如果您不想使用该Disable cache复选框,则在打开DevTools的情况下长按刷新按钮将显示一个菜单,其中包含选项Hard Reload或Empty Cache and Hard Reload应具有类似效果的选项.了解选项之间的区别.可以使用以下快捷方式:

• Command在Mac上+ Option+R
• ControlWindows或Linux上的+ Shift+R

Answer 2

当您需要每小时清理缓存30次时清除缓存太烦人了.所以我安装了一个名为Classic Cache Killer的Chrome扩展程序,可以在每次加载页面时清除缓存.

Chrome Store Link(免费) (现在没有恶意软件!)

现在我的模拟json,javascript,css,html和数据每次在每个页面加载时刷新.

如果我需要清除缓存,我永远不必担心.

我找到了大约20个用于Chrome的缓存清理程序,但这个看起来很轻巧且省力.在更新中,Cache Killer现在可以保持"始终开启"状态.

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

Answer 3

1. 按F12,然后(打开控制台)拉起Chrome开发人员控制台:

2. 右键单击(或按住左键单击)浏览器顶部的重新加载按钮,然后选择"清空缓存和硬重新加载".

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

Answer 4

还有两个选项可以在Chrome中禁用页面缓存:

1.在注册表中停用Chrome缓存

打开注册表(开始 - >命令 - >注册表)

搜索: 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+ 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中的数据.找到了一个解决方案:用于Chrome web开发人员的谷歌工具栏.安装工具栏后选择选项和"重置页面".

Answer 11

要明确的是,Chrome中的禁用缓存复选框(此处为v17,但我认为是v15)不在主设置UI中.它位于开发人员工具设置UI中.

1. 从浏览器窗口的扳手图标菜单(首选项菜单)中选择工具→开发人员工具

2. 在显示的开发人员工具UI中,单击右下角的齿轮图标.

3. 选中"网络"部分中的"禁用缓存"复选框.

Answer 12

仅在启用开发工具时,才能在chrome中禁用缓存

Answer 13

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

安装后,右键单击并转到选项:

http://j.mp/15ZdA6f

检查Automatically reload active tab after clearing data:

http://j.mp/15ZdGLh

选择Everything时间段:

http://j.mp/15ZdPy7

然后你可以去Menu => Tools => Extensions:

http://j.mp/15ZehfX

点击底部的键盘快捷键:

http://j.mp/15Zepft

并设置键盘快捷键,例如Ctrl+ Shift+ R:

http://j.mp/15Zev6M

Answer 14

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

Chromium不应该傲慢,不能做出决定并对用户实施设置.

您可以使用--disk-cache-dir =/dev/null在UNIX上禁用缓存.

由于这是意外的崩溃可能会发生,但如果他们这样做,那将明确指出一个更严重的错误,应该在任何情况下修复.

Answer 15

这可能对某人有帮助.

我已经操纵了我的Nginx疯狂缓存.因此,禁用网络工具中的缓存并显式清除缓存不起作用.

一个非常简单但又无聊的解决方法是,我只是打开一个新的隐身标签.令人惊讶的是,它始终有效!

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

Answer 16

当问这个问题时，Chrome 不支持禁用缓存功能。但现在，您可以在 Chrome 开发工具的“网络”选项卡中找到“禁用缓存”功能。

禁用缓存的网络选项卡

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

未选择禁用缓存

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

这对于本地网络开发来说效果很好，但我想强调一些限制。如果到目前为止讨论的解决方案符合您的用例，您可以停止阅读此处。

局限性

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

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

最近，我偶然发现了https://dev.to/requestlyio/disable-caching-of-pspecial-js-css-file-2k82，它帮助我了解如何禁用特定资源的缓存。

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

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

当发出请求时，rq_rand(4) 被 4 位随机数替换。

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

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

在这里您可以看到“禁用缓存”未被选中，并且由于 URL 中的随机参数（cb - 将其读取为缓存破坏者），资源仍然没有从缓存中加载。

1. 好处是您不需要为实现此行为而保持开发工具打开
2. 您可以永久启用此功能，您的浏览体验也不会受到影响。

规则获取方式

如果您已安装 Requestly，则可以使用以下链接浏览和下载规则 - https://app.requestly.io/rules/#sharedList/1600501411585-disable-cache-stackoverflow

免责声明：我构建了 Requestly，但我认为这可能对很多 Web 开发人员有帮助，因此在这里分享。

Answer 17

如何更改页面名称以防止页面缓存的书签.在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 18

我只是被赶上了，但不一定是因为Chrome。

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

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

将其设置为false可解决我的问题，但这并不理想。

我不知道这些数据保存在哪里，但我确实知道chrome从未在服务器上发出过请求。

Answer 19

现在有一种更好，更快捷的方法（Chrome 59.xx版）：

右键单击重新加载图标（URL字段的左侧），您将获得一个下拉菜单，选择第三个选项：“空缓存和硬重新加载”。

仅当开发人员工具打开时，此选项才可用。（请注意与选项2：“硬重载” -cmd-shift-R的区别）。这里没有缓存清空！