首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Chrome devtools中查看HTTP缓存占用的空间?

在Chrome DevTools中查看HTTP缓存占用的空间,可以按照以下步骤进行操作:

  1. 打开Chrome浏览器,并访问需要查看HTTP缓存的网页。
  2. 使用快捷键F12或者右键点击页面,选择“检查”或“检查元素”,打开Chrome DevTools。
  3. 在DevTools窗口中,点击顶部菜单栏的“Network”选项卡。
  4. 确保勾选了“Disable cache”选项,以禁用缓存。
  5. 刷新页面,在Network面板上可以看到加载的所有网络请求。
  6. 在Network面板中,找到并点击需要查看缓存的请求。
  7. 在右侧的面板中,可以看到请求的详细信息。在“Headers”选项卡下,找到“Response Headers”部分。
  8. 在“Response Headers”部分中,可以找到“Cache-Control”和“Expires”字段,用于标识缓存策略和缓存过期时间。
  9. 若要查看具体的缓存占用空间,可以选择点击“Size”选项卡,在下拉菜单中选择“Cache Storage”或“Application Cache”。
  10. 在“Cache Storage”或“Application Cache”选项卡中,可以看到具体的缓存占用空间,包括每个缓存文件的大小和总体的占用空间。

需要注意的是,Chrome DevTools中只能查看当前访问网页的缓存占用空间,无法查看其他网页的缓存信息。另外,由于Chrome DevTools的版本更新和调整,具体界面和操作可能会有所不同,但基本步骤和功能大致相同。

推荐的腾讯云相关产品是对象存储(COS),该产品为用户提供了高可用、低成本、安全可靠的云存储服务,可以用于存储和访问网页的静态资源、图片、视频等文件。更多信息,请访问腾讯云对象存储(COS)产品介绍页面:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端性能优化--性能分析工具

本文一起来研究下,前端性能分析可以怎么走~前端性能分析工具(Chrome DevTools)一般来说,前端性能分析通常可以从时间和空间两个角度来进行:时间:常见耗时,页面加载耗时、渲染耗时、网络耗时...、脚本执行耗时等空间:资源占用,包括 CPU 占用、内存占用、本地缓存占用等那么,下面来看看有哪些常见工具可以借来用用。...由于我们网页基本上跑在浏览器,所以基本上大多数工具都来源于浏览器自身提供,首当其冲的当然是 Chrome DevTools。本文我们也主要围绕 Chrome DevTools 来进行说明。...LighthouseLighthouse 前身是 Chrome DevTools 面板 Audits。...Tracing域可获取页面加载 DevTools 性能跟踪。可以使用Tracing.start和Tracing.stop创建可在 Chrome DevTools 或时间轴查看打开跟踪文件。

1.9K33

前端性能分析工具利器

本文主要介绍前端性能分析可以怎么走~ 前端性能分析工具(Chrome DevTools) 一般来说,前端性能分析通常可以从时间和空间两个角度来进行: 时间:常见耗时,页面加载耗时、渲染耗时、网络耗时...、脚本执行耗时等 空间:资源占用,包括 CPU 占用、内存占用、本地缓存占用等 那么,下面来看看有哪些常见工具可以借来用用。...Lighthouse Lighthouse 前身是 Chrome DevTools 面板 Audits。...将审查结果分组到面向用户报告最佳实践),对该部分应用加权和总体然后得出评分 主要功能 Lighthouse 会在一系列测试下运行网页,比如不同尺寸设备和不同网络速度。...Tracing域可获取页面加载 DevTools 性能跟踪。可以使用Tracing.start和Tracing.stop创建可在 Chrome DevTools 或时间轴查看打开跟踪文件。

3K62
  • DevTools 实现原理与性能分析实战

    支持 DOM + CSS 查看查看资源加载分析,脚本调试以及性能调试。现在开发中常用 DevTools 功能,基本也就这几个功能。...:9222 发起 HTTP / WebSocket 请求,即可获取 DevTools 数据。...1)Domain,命名空间,类似 C++/Java 命名空间或包名,用于分割不同命令。用于将众多子命令按类划分,方便使用者调用,以及防止 Method 同名冲突。...先查看 Main Thread Long task,比如,上图 Long task 就是 Scripting 占了较长时间。...由于移动设备碎片化,很多用户设备,性能可能并不好。那如何在开发环境优化这类低配置机器上表现呢?DevTools 提供了限流模拟,可以限制网络制式为 2G/3G,CPU 降速。

    1.2K30

    【调试】939- 5个Chrome调试混合应用技巧

    对前端开发人员来说,Chrome 真是一个必备开发工具,大到页面展示,小到 BUG 调试/HTTP 抓包等,本文我将和大家分享自己做混合应用开发过程中经常用到几个调试技巧。...一、调试安卓应用 在进行混合应用开发过程,经常需要在安卓应用调试 H5 项目的代码,这里我们就需要了解安卓应用如何在 Chrome 上进行调试。...二、筛选特定条件请求 在 Network 面板,我们可以在 Filter 输入框,通过各种筛选条件,来查看满足条件请求。 使用场景: 只需要查看失败或者符合指定 URL 请求。...关于过滤器更多用法,可以阅读《Chrome DevTools: How to Filter Network Requests》(https://www.freecodecamp.org/news/chrome-devtools-network-tab-tricks...四、断点时修改代码 在 Sources 面板,我们可以在需要断点行数右击,选择“Add conditional breakpoint”,然后在输入框输入表达式(赋值操作等),后面代码将使用该结果

    2.1K20

    Vue 框架学习系列十一:Vue 3 性能优化

    在构建大型Vue 3应用时,性能优化是至关重要。通过采取一系列策略,开发者可以显著提升应用响应速度、减少内存占用,并提升整体用户体验。本文将探讨Vue 3性能优化关键领域,并提供实用建议。...懒加载组件:使用Vue异步组件和动态导入功能,实现组件懒加载。当组件首次被请求时,它们才会被加载到内存,从而节省初始加载时间和内存占用。...使用computed属性:computed属性基于其依赖响应式数据进行缓存。当依赖项未发生变化时,computed属性将返回缓存值,避免不必要计算。...六、性能监控与调试使用Vue DevTools:Vue DevTools提供了丰富性能监控工具,可以帮助开发者识别性能瓶颈和内存泄漏。...性能分析工具:结合浏览器性能分析工具(Chrome DevToolsPerformance面板),可以深入分析应用性能表现,并找出需要优化代码段。

    16910

    Selenium - 用这个力量做任何你想做事情

    Chrome DevTools 简介 Chrome DevTools 是一组直接内置在基于 Chromium 浏览器( Chrome、Opera 和 Microsoft Edge)工具,用于帮助开发人员调试和研究网站...借助 Chrome DevTools,开发人员可以更深入地访问网站,并能够: 检查 DOM 元素 即时编辑元素和 CSS 检查和监控网站性能 模拟用户地理位置 模拟更快/更慢网络速度 执行和调试...JavaScript 查看控制台日志 等等 Selenium 4 Chrome DevTools API Selenium 是支持 web 浏览器自动化一系列工具和库综合项目。...关于这个命令信息可以在文档中找到。 让我们看看如何在 Selenium 4 和 Chrome DevTools API 完成这个过程。...现在,我们可以增强我们测试,捕获 HTTP 网络流量,收集性能指标,处理身份验证,并模拟地理位置、时区和设备模式。以及在 Chrome DevTools 可能出现任何其他功能!

    18710

    前端开发必备之Chrome开发者工具(下篇)

    下面的代码可以在 DevTools Console 运行。 它将使用 Network Timing API 检索所有资源。...如果您部署了 HTTP 2,请不要对您资源进行域分片,因为它与 HTTP 2 操作方式相反。在 HTTP 2 ,到服务器单个 TCP 连接作为多路复用连接。...性能面板(Performance) 使用 Chrome DevTools Timeline 面板可以记录和分析您应用在运行时所有活动。 这里是开始调查应用可觉察性能问题最佳位置。...应用面板(Application) 该面板主要能做: 查看和修改本地存储与会话存储。 检查和修改 IndexedDB 数据库。 对 Web SQL 数据库执行语句。 查看应用缓存和服务工作线程缓存。...要访问 Chrome DevTools 传感器控件,请执行以下操作: 打开 DevTools 主菜单 在 More Tools 菜单下,点击 Sensors ?

    1.7K111

    Selenium 自动化 | 可以做任何你想做事情!

    Chrome DevTools 简介 Chrome DevTools 是一组直接内置在基于 Chromium 浏览器( Chrome、Opera 和 Microsoft Edge)工具,用于帮助开发人员调试和研究网站...借助 Chrome DevTools,开发人员可以更深入地访问网站,并能够: 检查 DOM 元素 即时编辑元素和 CSS 检查和监控网站性能 模拟用户地理位置 模拟更快/更慢网络速度 执行和调试...JavaScript 查看控制台日志 等等 Selenium 4 Chrome DevTools API Selenium 是支持 web 浏览器自动化一系列工具和库综合项目。...关于这个命令信息可以在文档中找到。 让我们看看如何在 Selenium 4 和 Chrome DevTools API 完成这个过程。...现在,我们可以增强我们测试,捕获 HTTP 网络流量,收集性能指标,处理身份验证,并模拟地理位置、时区和设备模式。以及在 Chrome DevTools 可能出现任何其他功能!

    74930

    值得关注一些Network面板小知识

    前言 最近在做XXX性能检测工具时,发现跟Chrome浏览器接触很多,里面一些调试技巧,以及查看性能指标都离不来它。...Queueing:浏览器在以下情况下会排队处理请求 有更高优先级请求。 这个原点已经有6个TCP连接开放,这已经是极限了。仅适用于HTTP1.0和HTTP1.1。...浏览器正在短暂地分配磁盘缓存空间。 Stalled:由于排队描述任何原因,可以停止该请求。 DNS Lookup:浏览器正在解析请求IP地址。...参考资料 [1] Network features reference: https://developer.chrome.com/docs/devtools/network/reference/ [2...]Inspect network activity: https://developer.chrome.com/docs/devtools/network/ [7]Reduce server response

    58120

    值得关注一些Network面板小知识

    前言 最近在做XXX性能检测工具时,发现跟Chrome浏览器接触很多,里面一些调试技巧,以及查看性能指标都离不来它。 ?...Queueing:浏览器在以下情况下会排队处理请求 有更高优先级请求。 这个原点已经有6个TCP连接开放,这已经是极限了。仅适用于HTTP1.0和HTTP1.1。...浏览器正在短暂地分配磁盘缓存空间。 Stalled:由于排队描述任何原因,可以停止该请求。 DNS Lookup:浏览器正在解析请求IP地址。...查看导致请求堆栈 当JavaScript语句导致请求资源时,将鼠标悬停在“启动器”列上以查看导致请求堆栈跟踪。有些时候,可以查看哪些请求是多余,毕竟能减少请求次数还是十分有必要。...参考资料 [1] Network features reference: https://developer.chrome.com/docs/devtools/network/reference/ [2

    82710

    Chrome DevTools 全攻略!助力高效开发

    查看 HTTP 响应内容点击 Response(响应)标签页可以查看该资源未格式化 HTTP 响应内容 接口返回值(在 preview )同样也可以 Save global variable 存储一个全局变量...在等待一个即将被释放不可用 TCP socket 浏览器正在短暂分配磁盘缓存空间,生成磁盘缓存条目(通常非常快) Stalled (停滞) - 发送请求之前等待时间。... 163,虽然证书是有效,但是页面有一部分 http 资源: ?...在 Chrome Devtools 设备模式下,在三圆点菜单点击, Show Media queries 即可启用: 右键点击某个条形,查看媒体查询在 CSS 何处定义并跳到源代码定义 ?...参考 Chrome Network ,Size 和 Time 为什么有两行参数 Chrome 开发者工具 Google chrome-devtools Chrome devtools 使用详解——Performance

    1.6K10

    Android H5页面性能分析策略

    四、使用Chrome DevTools调试Android端 使用Chrome DevTools调试Android端H5页面是一个相对直接过程。...在开发机上打开Chrome DevTools:可以在Chrome浏览器地址栏输入chrome://inspect,然后按回车键打开Chrome DevTools。...在Chrome DevTools中选择你设备:在"chrome://inspect/#devices"页面,应该能看到你Android设备和设备上打开Chrome标签页。...以下是使用抓包工具(Wireshark或Charles)来分析Android H5页面性能基本步骤: 设置代理:首先,我们需要在Android设备或模拟器上设置一个HTTP代理。...例如,可以查看每个请求时间,找出加载时间最长请求,查看HTTP状态码等。 注意,如果需要抓取HTTPS请求,可能需要在Android设备或模拟器上安装抓包工具证书。

    8110

    JS内存泄漏排查方法

    实际上,稍微有点交互功能(比如局部刷新)简单页面,稍不仔细就会留下内存隐患,暴露出来就叫内存问题 一.工具环境 工具: Chrome Task Manager工具 Chrome DevTools Performance...面板 Chrome DevTools Memory面板 环境: 稳定,去掉网络等变化因素(用假数据) 操作易重复,降低“累积”难度(简化操作步骤,比如短信验证之类环节考虑去掉) 无干扰,排除插件影响(...>4 对象可以通过两种方式占用内存: 直接通过对象自身占用 通过持有对其它对象引用隐式占用,这种方式会阻止这些对象被垃圾回收器(简称GC)自动处理 在DevTools堆内存快照分析面板会看到Shallow...Size和Retained Size分别表示对象通过这两种方式占用内存大小 Shallow Size 对象自身占用内存大小。...Fix Memory Problems Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Finding

    7.6K50

    提升 Web 核心性能指标的 9 个建议

    你还可以使用 Chrome devtools 加载瀑布工具来识别开始加载较晚资源,通过把图片包含在 HTML (让图片元素预加载)即可解决这个问题。...BF Cache 我们去年看到 CLS 最大改进之一是在 Chrome 推出回退缓存或 BF 缓存。另外,Safari 和 Firefox 也已经上线这个功能一段时间了。...JavaScript 是单线程且贪婪,一旦它占用了 CPU,它就会尽可能地一直保持它,直到它不能处理或者处理完毕为止。在这个例子,即使有五个子进程,所有的五个进程也是会一个接一个地执行。...我们可以使用 Chrome Devtools Coverage 特性来查看我们 JavaScript 有多少被执行了。...包括 Chrome Devtools、Lighthouse 和我们添加到 JavaScript 框架和平台中组件,许多这些建议已经涵盖在我们各种工具

    58120

    网站测速性能测试深入浅出教程[附15款常用网站测速工具

    它是一个开放源代码项目,允许您使用真正浏览器(Chrome等)在全球多个位置运行免费网站速度测试。对于需要从速度测试获取额外数据高级用户来说,这是一个很好工具。 ?...KeyCDN还有其他免费Web性能测试工具,Ping测试,HTTP / 2测试,HTTP检查和Traceroute工具。 8....但是,扩展程序仍然提供了一些有用信息,但我们建议使用新且保持更新网站速度测试工具。 11. Chrome DevTools Chrome DevTools 网络面板是Chrome提供功能。...这在试图确定第三方服务或脚本在您站点上开销时非常有用。 ? Chrome Devtools请求拦截功能 Google团队还将Lighthouse整合到Chrome Devtools。...Chrome Devtools网页性能检测功能 Chrome Devtools其他功能包括能够禁用缓存,限制网络连接,获取页面呈现屏幕截图以及诊断较慢TTFB。 12.

    3.6K10

    DevToolsChrome 85)新功能

    CSS-in-JS 框架样式编辑 通过即时编辑代码或样式来实时查看DevTools 最有用功能之一。...关于第一个脚本,直到 Chrome 84,如果未缓存给定脚本,DevTools 不会显示缓存信息: ? 编译之前 现在,缓存信息总是显示在摘要标签[25],显示了未进行缓存原因: ?...总结 在本文中,我们浏览了 Chrome 85 DevTools 最重要更改。但是我没有深入探讨本文开头所提到四项改进,但是你可以在这里查看相关内容[27]。...开发版本: https://www.google.com/chrome/dev/ [7] Chrome 发行渠道: http://www.chromium.org/getting-involved/...id=974550 [27] 查看相关内容: https://developers.google.com/web/updates/2020/06/devtools [28] Chrome Canary

    72130

    【译】Chrome77 Devtools有哪些新功能?

    该页面没有为图像或广告预留任何空间,因此浏览器必须将所有其他内容向下移动来为它们腾出空间。这种情况解决方案是使用占位符。 ?...我们没有在DevTools新功能(Chrome 76)中介绍它,所以我们现在介绍它。 Audits面板现在运行Lighthouse 5.1。...当前页面完成加载后,且带宽可用情况下,这些资源将在 Chrome 以 Lowest 优先级被提取。...这意味着,prefetch 最适合抢占用户下一步可能进行操作并为其做好准备,例如检索结果列表首个产品详情页面或检索分页内容下一页。 ?...下载Chrome Canary版本作为你默认浏览器开发版,Canary会为你提供最新DevTools功能。

    86750

    【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

    DevToolsChrome 74)新增功能 高亮显示所有受 CSS 属性影响节点 将鼠标悬停在会影响节点盒子模型 CSS 属性上, padding 或 margin ,会高亮显示受到这个属性声明影响所有节点...DevToolsChrome 75)新增功能 CSS 函数自动补全有意义预设值 某些 CSS 属性(filter)值是函数。...当自动补全, filter 属性时,DevTools 会自动补全有意义值,可以很方便预览这个值将在节点上进行更改效果。 ?...新版本,可以查看这个 demo 数据库。 悬停查看资源未压缩大小 将鼠标悬停在 Size 列上可以查看资源未压缩大小。 ?...新版本,Breakpoints面板中有 3 行。 DevToolsChrome 76)新增功能 根据 CSS 值自动补全属性名 输入 CSS 值,根据值找到对应属性名称。 ?

    1.6K30
    领券