能否通过Chrome DevTools Protocol获取DevTools底部页面统计数据？

具体每个指标的获取方式 #

1. 请求数、网络传输量、全资源大小（含Service Worker/缓存） #

这些数据需要通过监听Network域的事件来汇总：

• 首先得先调用 Network.enable 开启网络事件监听；
• 监听 Network.requestWillBeSent 来标记每个请求的启动，同时通过事件里的 fromDiskCache、fromServiceWorker 字段区分请求来源（缓存/SW/常规网络）；
• 监听 Network.loadingFinished（处理成功请求）和 Network.loadingFailed（处理失败请求）来获取最终数据：
  • 请求数：直接统计所有触发这两个事件的请求总数（建议过滤掉chrome-devtools这类内部请求，和DevTools显示的结果保持一致）；
  • 传输数据量：取 loadingFinished 事件里的 encodedDataLength（实际传输的压缩后大小）；
  • 全资源大小：取 loadingFinished 事件里的 decodedBodyLength（解压后的实际资源大小）；
• 把这些数据按来源分类汇总，就能得到和DevTools底部一致的统计结果。

2. 完成时间 #

这个是页面从开始加载到最后一个资源加载完成的耗时：

• 记录页面导航启动的时间：监听 Page.frameStartedLoading 事件，取它的 timestamp；
• 跟踪所有 Network.loadingFinished 的时间戳，找到最晚的那个；
• 用最晚的资源完成时间减去导航启动时间，就是DevTools底部显示的「完成时间」。

3. DOMContentLoaded（DCL）和Load事件 #

直接监听Page域的两个事件即可：

• 先调用 Page.enable 开启页面事件监听；
• 监听 Page.domContentLoadedEventFired 和 Page.loadEventFired，这两个事件都会返回对应的时间戳；
• 用事件的时间戳减去导航启动时间，就能得到DCL和Load事件的耗时，和DevTools底部显示的完全一致。

注意事项 #

• 一定要先启用对应的CDP域（Network.enable、Page.enable），否则收不到任何事件；
• 如果要和DevTools的统计完全对齐，记得过滤掉DevTools自身发起的请求（比如scheme为chrome-devtools的请求）；
• 对于重定向请求，Network.requestWillBeSent会触发多次，需要通过requestId关联，避免重复计数。

内容的提问来源于stack exchange，提问作者Tom