在 Chrome DevTools 中测量整页大小

Question

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

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

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

你有什么想法可以实现吗？

Answer 1

在“网络”选项卡中，确保选中 'Disable cache'，然后在加载页面时查看底部面板的总传输大小。请参阅下面的屏幕截图：

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