在 Chrome DevTools 中测量整个页面大小

Posted 2023-02-23

【中文标题】在 Chrome DevTools 中测量整个页面大小

【英文标题】：Measure full page size in Chrome DevTools

【发布时间】：2016-11-09 10:45:06

【问题描述】：

我已经在谷歌上搜索了一段时间，但没有找到任何明确的解决方案。

我想测量整个网页的重量/大小（所有文档 + 脚本 + 字体 + 样式等）。我知道 devtools 中的网络选项卡具有大小/内容 - 但我希望将其求和（而不是每次都求和）。

我一直在寻找 chrome.devtools.* API，但没有找到任何直截了当的东西。

您有一些想法如何实现吗？

【参考方案1】：

在“网络”选项卡中，确保选中“禁用缓存”，然后在加载页面时，查看底部面板以了解总传输大小。请看下面的截图：

各个大小已四舍五入，但底部的总和使用字节大小，您可以在 HAR 中看到。然后将总数四舍五入以供显示。如果您发现个人总和与 DevTools 显示的总数之间略有不匹配，那就是原因。

【讨论】：

您知道 Chrome 是否提供扩展 API 来跟踪传输的字节数？我找不到一个