禁用Chrome缓存进行网站开发

本文讨论了在Chrome浏览器上进行网站开发时遇到的缓存问题,以及如何禁用或绕过缓存以查看实时更改的多种方法。用户分享了使用Chrome扩展程序、手动刷新、调整Chrome设置、利用隐身模式以及使用特定书签和PHP脚本等解决方案。此外,还提到了Service Workers和浏览器缓存机制对开发的影响。
摘要由CSDN通过智能技术生成

我正在修改网站的外观(修改CSS),但是由于烦人的持久性缓存,在Chrome上看不到结果。 我尝试了Shift +刷新,但是没有用。

如何临时禁用缓存或以可以看到更改的某种方式刷新页面?


#1楼

在此处输入图片说明

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

Chrome商店链接(免费) (现在没有恶意软件!)

现在,我的模拟json,javascript,css,html和数据每次每次页面加载 都会刷新。

永远不必担心是否需要清除缓存。

我发现有大约20种适用于Chrome的缓存清理器,但是这种清理器看起来很轻巧,而且几乎不费力。 在更新中,Cache Killer现在可以保持“始终打开”状态。

注意:我完全不了解插件作者。 我只是觉得有用。


#2楼

仅当您打开开发工具时,才能在Chrome中禁用缓存


#3楼

chrome网上商店中有一个chrome扩展名为Clear Cache

我每天都使用它,并且它是我认为非常有用的工具。 您可以将其用作重新加载按钮,并清除缓存,如果您还喜欢cookie,语言环境存储,表单数据等,也可以定义。 因此,只需在您选择的域上仅需按一下重新加载按钮即可清除所有这些内容。

非常非常棒!

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

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


#4楼

如何更改页面名称以防止页面缓存的小书签呢? 在Chrome浏览器中,您将创建一个新书签,然后将代码粘贴到URL中。 单击书签,页面将重新加载时间戳以阻止缓存。

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

#5楼

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

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

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

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

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


#6楼

永久禁用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的路径


#7楼

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

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

在此处输入图片说明

Automatically reload active tab after clearing data选中Automatically reload active tab after clearing data

在此处输入图片说明

选择时间段的Everything

在此处输入图片说明

然后,您可以转到菜单=>工具=>扩展程序:

在此处输入图片说明

单击底部的键盘快捷键:

在此处输入图片说明

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

在此处输入图片说明


#8楼

实际上,如果您不介意使用带宽,出于多种原因,禁用缓存会更安全,许多安全站点建议这样做。

Chromium不应过于傲慢地做出决定并强制对用户进行设置。

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

因为这是意料之外的崩溃,但如果发生崩溃,那显然会指出更严重的错误,无论如何都应该修复。


#9楼

嘿,如果您的网站使用的是PHP,则在HTML页面的开头放置以下PHP小片段:

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

现在到处都可以在脚本或链接元素中加载诸如CSS-或JS-文件之类的资源,然后在附加“?”之后将生成的随机值附加到请求URL。 通过PHP到URI:

    echo $rand;

而已! 无论哪种浏览器,都不会再有缓存您站点的浏览器。

当然,在发布之前删除代码,或将$ rand设置为空字符串即可再次进行缓存。


#10楼

重新加载菜单的图片

  1. F12 ,然后(在控制台打开的情况下)拉起Chrome开发者控制台:

  2. 右键单击(或按住鼠标左键)在浏览器顶部的重新加载按钮上,然后选择“空缓存和硬重新加载”。

这将超出“硬重载”以完全清空缓存,从而确保通过javascript等下载的任何内容也将避免使用缓存。 您不必弄乱设置或其他任何东西,这是一种快速的一键式解决方案。


#11楼

如果您不想编辑Chrome的设置,则可以使用隐身模式获得相同的结果。


#12楼

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

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

我发现不禁用媒体缓存是个好主意,但这是出于完整性考虑。

实际上,我想要一个选项来完全禁用高速缓存,将内存用于IO而不是磁盘(这也会使加载时间快10倍!),但是我不认为chrome或任何与此相关的浏览器都具有该选项。


#13楼

  1. F12打开Chrome DevTools
  2. F1打开DevTools设置
  3. 选中禁用缓存(打开DevTools时) ,如下所示:

当前位于“ 选项” 选项卡上,这是默认选项。 您可能需要向下滚动。 自问这个问题以来,此复选框已移动了至少两次。 最后我检查了一下,它在底部的中间列中。 如果您在较薄的屏幕上打开它,并且“首选项”下有两列,则该列可能位于右上角附近。 如有任何更改或评论,请随时更新。我将更新该帖子。

在此处输入图片说明


#14楼

从版本50开始(如果我没记错的话),“禁用缓存”选项已从Devtool设置中删除。 转到“网络”标签,然后有“禁用缓存”选项。


#15楼

我的第3个Chrome扩展页面大小检查器提供了另一个禁用缓存的选项,该选项与Devtools完全相同地禁用缓存。

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

屏幕截图-页面大小检查器


#16楼

而不是按“ F5”:

“ Ctrl + F5”


#17楼

这可能会帮助某人。

我已将Nginx装配用于疯狂缓存。 因此,禁用网络工具中的缓存并明确清除缓存是行不通的。

一个非常简单但无聊的解决方法是,我只是打开一个新的隐身标签。 令人惊讶的是,它一直都在工作!

每当我希望以相同模式重新加载时,在隐身模式下进行硬刷新都可以解决问题。


#18楼

不确定您使用的是什么,但是如果您使用的是ASP.Net,则可以执行以下操作,就像超级按钮一样:

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

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


#19楼

如何临时禁用缓存或以可以看到更改的某种方式刷新页面?

目前尚不清楚您指的是哪个“缓存”。 浏览器可以通过几种不同的方法持久地缓存内容。 Web存储是其中之一, Cache-Control是另一种。

某些浏览器还具有与Service Workers结合使用的Cache ,以创建提供脱机支持的渐进式Web应用程序(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()
    }) 
  })

#20楼

到目前为止,Chrome的Cache Killer是最好的选择。 由于安装URL的商店URL已关闭,因此您可以在此处下载CRX文件:

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

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


#21楼

现在有一种更好,更快捷的方法(Chrome 59.xx版):

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

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


#22楼

我有同样的问题,我尝试过:

  • 控制Shift R,
  • 禁用F12中的缓存
  • 控制F5。

然后,我发现不建议将.appcache清单用于非https站点 。 我在html标记中删除了site.appcache文件及其引用,现在可以看到每个页面的最新版本!


#23楼

我当时处于浏览器从磁盘加载缓存数据的情况,即使我检查它是否禁用了缓存(我正在使用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

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


#24楼

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


#25楼

如果您使用ServiceWorkers (例如:对于渐进式Web应用程序),则可能还需要在开发工具中的“应用程序”>“ Service Workers”下选中“重新加载时更新”。

在此处输入图片说明


#26楼

使用Ctrl + Shift + R刷新很不错,但没有得到我需要的一切。 仍然有些事情不会刷新,例如存储在js和CSS中的数据。 找到了解决方案: 适用于Chrome Web开发人员的google工具栏 。 安装工具栏后,选择选项和“重置页面”。


#27楼

Chrome DevTools可以禁用缓存。

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

开发工具面板的屏幕截图

请记住,正如@ChromiumDev的一条推文所述,此设置仅在devtools打开时才有效

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

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

  • 在Mac上为Command + Option + R
  • Windows或Linux上的Control + Shift + R

长按


#28楼

除了禁用缓存选项(可通过开发人员工具窗口右下角的按钮-工具|开发人员工具,或Ctrl + Shift + I进入)之外,在开发人员工具的网络窗格中,您还可以现在,右键单击并从弹出菜单中选择“清除缓存”。


#29楼

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

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

  2. 在出现的开发者工具用户界面中,点击右下角的齿轮图标。

  3. 选中“网络”部分中的“禁用缓存”复选框。


#30楼

在Canary频道中(也许会紧随开发者和稳定频道),这是“常规”部分下左侧的第二个总体选择。

禁用Chrome Canary Channel中的缓存

除此之外,始终可以通过Ctrl + Shift + N切换到隐身模式。尽管很遗憾,这也结束了您的会话。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值