在Chrome DevTools中测量整页大小 [英] Measure full page size in Chrome DevTools

问题描述

我想测量整个网页的重量/大小（所有的网页+大小）脚本+字体+样式等）。我知道devtools中的网络标签有大小/内容 - 但是我想总结它（并且不会每次总结它）。

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

你有一些想法如何实现？

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

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

I've been googling for some time but haven't found any clear solution for this.

I want to measure full webpage weight / size (all doucment + scripts + fonts + styles etc.). I know the network tab in the devtools has size/content - but I want to have it summed (and not sum it every time).

I've been looking for chrome.devtools.* API but haven't found anything straight-forward.

Do you have some ideas how to achieve that?

解决方案

In the Network tab, make sure 'Disable cache' is checked and then when you load a page, look at the bottom panel for the total transfer size. See screenshot below:

The individual sizes are rounded, but the total at the bottom uses the byte size, which you can see in the HAR. The total then is rounded for display. If you find a slight mismatch between summing the individuals and the total shown by DevTools, that is the reason.

这篇关于在Chrome DevTools中测量整页大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！