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

Disabling Chrome cache for website development

我正在修改一个站点的外观(CSS修改),但是由于恼人的持久缓存,我看不到Chrome上的结果。我尝试了SFIFT +刷新,但它不起作用。

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


chrome devtools可以禁用缓存。

  • 右键单击并选择Inspect Element打开devtools。或者使用以下键盘快捷键:
    • F12
    • Mac上的XYKBCOMand+option+
    • Windows或Linux上的control+shift+i
  • 单击工具栏中的Network打开网络窗格。
  • 选中顶部的EDOCX1[2]复选框。
  • screenshot of development tools panel

    请记住,正如@chromiumdev的tweet所述,此设置仅在devtools打开时才有效。

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

    如果不想使用Disable cache复选框,长按devtools打开时的刷新按钮将显示一个菜单,其中包含Hard ReloadEmpty Cache and Hard Reload选项,效果应该类似。了解选项之间的差异。以下快捷方式可用:

    • Mac上的command+option+r
    • Windows或Linux上的control+shift+r

    long press


    enter image description here

    当您需要每小时清除缓存30次时,清除缓存太麻烦了。所以我安装了一个称为经典缓存杀手的Chrome扩展,它可以在每次页面加载时清除缓存。

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

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

    如果我需要清除我的缓存,我从不需要担心。

    我找到了大约20个缓存清洗器,但这一个看起来很轻,而且不费吹灰之力。在更新中,缓存杀手现在可以保持"始终开启"。

    注意:我不知道插件的作者。我发现它很有用。


    Picture of reload menu

  • f12,然后(在控制台打开的情况下)打开chrome developer控制台:

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

  • 这将超越"硬加载"完全清空缓存,确保通过javascript或其他方式下载的任何内容也将避免使用缓存。你不必乱动设置或任何东西,这是一个快速的单镜头解决方案。


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

    1。在注册表中停用chrome缓存

    打开注册表(start->command->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"

    重要:

    • 在铬…exe之后有一个空间和连字符。

    • 离开路径到Chelmi.EXE,因为它是

    • 如果你抄这行,一定要检查,如果引文是实际引文。

    2。通过更改快捷方式属性禁用Chrome缓存

    右键单击Chrome图标并在"上下文"菜单中选择"属性"。向路径添加以下值:EDCOX1×3

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

    重要:

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

    • 保留chrome.exe的路径


    如果您不想编辑Chrome的设置,您可以对相同的结果使用匿名模式。


    除了禁用缓存选项(通过开发人员工具窗口右下角的一个按钮——工具开发人员工具,或CtrL+shift+)外,在开发人员工具的网络窗格上,您现在可以右键单击并从弹出菜单中选择"清除缓存"。


  • F12打开Chrome DevTools
  • 打开DevTools设置的F1
  • 检查禁用缓存(DevTools打开),如下所示:
  • 这是当前的首选项选项卡,这是默认的。您可能需要向下滚动。这个问答箱已经被移动了至少几次,因为这个问题被问及。最后我检查了一下,它在底部的中间柱上。如果你在一个更薄的屏幕上打开它,在偏好下有2列,它可能在右上方。随时更新这个帖子,如果它改变或评论,我会更新帖子。

    enter image description here


    在金丝雀频道(也许DEV和稳定频道将跟随)这将被发现是第二个选项,总体上在左手边的"一般"部分下。

    Disable Cache in Chrome Canary Channel

    除此之外,还可以通过ctrl+shift+n切换到匿名模式。尽管很不幸,这也会结束您的会话。


    而不是点击"F5"刚刚击中:

    "Ctrl + F5"


    要清除,chrome中的禁用缓存复选框(这里是v17,但我相信v15)不在主设置界面中。它位于开发人员工具设置用户界面中。

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

  • 在出现的开发工具UI中,单击右下角的齿轮图标。

  • 检查网络部分中的"禁用缓存"复选框。


  • 使用ctrl+shift+r进行刷新很好,但并没有得到我需要的一切。还有一些东西不会刷新,比如JS和CSS中存储的数据。找到了一个解决方案:为ChromeWeb开发人员提供的Google工具栏。安装工具栏后,选择"选项"和"重置页面"。


    禁用chrome中的缓存仅在打开dev工具时有效


    在修复错误之前,您可以使用clear cache chrome插件,也可以为其设置键盘快捷方式。

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

    http://j.mp/15zda6f

    检查Automatically reload active tab after clearing data

    http://j.mp/15zdglh

    选择Everything作为时段:

    http://j.mp/15zdpy7

    然后你可以进入菜单=>工具=>扩展:

    http://j.mp/15zehfx

    单击底部的键盘快捷键:

    http://j.mp/15zepft

    并设置键盘快捷方式,例如ctrl+shift+r

    http://j.mp/15zev6M


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

    Chromium不应该傲慢到做出决定并强制用户设置。

    可以使用--disk cache dir=/dev/null禁用UNIX上的缓存。

    因为这是意外的崩溃可能会发生,但如果他们这样做,那将清楚地指出一个更严重的错误,应该在任何情况下加以修复。


    这可能对某人有所帮助。

    我已经安装了我的nginx疯狂缓存。因此,在网络工具中禁用缓存和显式清除缓存不起作用。

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

    在匿名模式下的硬刷新可以在我希望以相同模式重新加载的任何时候进行此技巧。


    用书签来改变页面名称以防止页面缓存怎么样?在chrome中,您将创建一个新书签,然后将代码粘贴到URL中。单击书签,页面将用时间戳重新加载以阻止缓存。

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

    我只是被抓住了,但不一定是因为铬。

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

    1
    2
    3
    4
       $.ajax({
            type: 'GET',
            cache: true,
            ....

    将此设置为"错误"可以解决我的问题,但这并不理想。

    我不知道在哪里保存这些数据,但我知道Chrome从来没有请求服务器。


    现在有更好更快的方法(Chrome版本59.x.x.):

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

    此选项仅在开发人员工具打开时可用。(注意选项2的区别:"硬重新加载"-cmd-shift-r)。这里不能清空缓存!


    Chrome Web Store中有一个名为clear cache的Chrome扩展。

    我每天都用它,我认为它是一个非常有用的工具。您可以使用它作为重新加载按钮,并可以清除缓存,如果您还喜欢cookie、区域设置存储、表单数据等,还可以定义在哪个域上发生这种情况。所以只需在你选择的域名上按"重新加载"按钮就可以清除所有这些垃圾。

    非常非常好!

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

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


    我的第三个chrome扩展页面大小检查器提供了一个禁用缓存的选项,它与devtools完全一样禁用缓存。

    此外,该扩展还可以方便地报告网页大小、缓存使用情况、网络请求和加载时间。加上它在Github的开放源代码。

    Screenshot - Page Size Inspector


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

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

    然后我发现,不推荐对非https站点使用.appcache清单。我在HTML标记中删除了site.appcache文件及其引用,现在我看到了每个页面的最新版本!


    如果您正在使用ServiceWorkers(例如:对于渐进式Web应用程序),您可能也需要在dev tools中的application>service workers下检查"update on reload"。

    enter image description here


    不确定使用的是什么,但如果使用的是ASP.NET,则可以执行以下类似于魅力的操作:

    1
    <link href="@Url.Content("~/Content/Site.css")[email protected]" rel="stylesheet" />

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


    How can I disable the cache temporarily or refresh the page in some way that I could see the changes?

    不清楚你指的是哪个"缓存"。浏览器可以持久地缓存内容,有几种不同的方法。web存储是其中之一,Cache-Control是另一个。

    一些浏览器也有一个Cache,与服务人员一起使用,创建提供离线支持的渐进式Web应用程序(pwa)。

    清除PWA的缓存

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

    要列出缓存键的名称,请运行:

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

    按名称删除缓存键(即my-site-cache)。然后刷新页面。

    如果刷新后在控制台中看到任何与工作相关的错误,则可能还需要注销已注册的工作人员:

    1
    2
    3
    4
    5
    6
    navigator.serviceWorker.getRegistrations()
      .then(registrations => {
        registrations.forEach(registration => {
          registration.unregister()
        })
      })


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

    "C:Program Files(x86)GoogleChromeApplicationChrome.exe"--磁盘缓存大小=1-媒体缓存=1

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

    实际上,我希望有一个选项可以完全禁用缓存,将内存用于IO而不是磁盘(这也会使加载时间加快10倍!)但我认为Chrome或其他浏览器还没有这个选择。


    从版本50(如果我记得正确的话)开始,"禁用缓存"选项就从devtool设置中删除了。转到"网络"选项卡,这里有"禁用缓存"选项。


    嘿,如果您的站点正在使用PHP,那么请在HTML页面的开头放置以下小PHP代码段:

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

    现在,无论您在脚本或链接元素中加载CSS或JS等资源,您都可以在附加"?"后将生成的随机值附加到请求URL。通过php到uri:

    1
        echo $rand;

    就是这样!将不再有浏览器缓存您的网站-无论哪种。

    当然,在发布之前删除代码,或者简单地将$rand设置为空字符串,以再次允许缓存。


    将这串代码添加到您的中,它就可以做到这一点。

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

    我当时的情况是浏览器从磁盘加载缓存数据,即使我检查了它禁用缓存(我使用的是chrome)。我所有的CSS和JS都是从服务器加载的,而不是从网页加载的。这发生在我的本地和生产上。

    要修复它,我需要在我的URL中添加一个额外的参数,以强制浏览器从服务器获取网页,甚至控制器也不需要它。

    我使用的是ASP.NET,下面是我的示例

    1
    2
    3
    4
    5
    6
    7
    //Controller function
    public ActionResult Index()
        {
            return View();
        }
    //Link
    @Html.Action("Index","Home", new { ts = DateTime.Now.Ticks.ToString()})

    结果是,它会生成一个链接:HTTP://www. MyWeb.COM/HOME/HORD?TS=636558555408282209

    这是我的处境和解决办法。希望能帮助别人。


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

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

    下载扩展名文件后,打开chrome->more tools->extensions,然后将crx文件从文件资源管理器或桌面(取决于下载文件的位置)拖动到chrome窗口以安装扩展名。


    我使用(在Windows中)ctrl+shift+delete,当chrome对话框出现时,按Enter键。这可以配置为每次执行此序列时需要清除的内容。在这种情况下,不需要打开开发工具。