可通过Chrome开发者工具Network面板、第三方流量监控扩展或chrome://net-internals页面监控网页流量消耗。
如果您想了解某个网页在加载和运行过程中消耗了多少网络流量，可以通过谷歌浏览器内置的开发者工具或扩展程序来监控其网络活动。以下是几种可行的方法：
本文运行环境：MacBook Pro，macOS Sonoma
一、使用Chrome开发者工具的Network面板
Chrome开发者工具是浏览器自带的强大调试功能，其中的Network（网络）面板可以精确记录并分析网页产生的所有网络请求及其流量消耗。
1、通过快捷键 Cmd+Option+I 打开开发者工具，或点击浏览器右上角菜单，选择“更多工具” > “开发者工具”。
2、在开发者工具顶部标签栏中，点击 Network 切换到网络面板。
3、确保左上角的圆形录制按钮为红色点亮状态，然后重新加载页面，以捕获完整的网络活动。
4、页面加载完成后，底部会显示总计的请求数量和传输的数据总量（如 1.2 MB transferred）。可以在列表下方的表格中查看每个资源的大小（Size列）和耗时（Time列）。
5、点击任意一个请求，在下方详情区域的 Headers 和 Timing 标签页中可查看更详细的请求头信息和时间分布。
二、利用Vivaldi风格的流量统计扩展
通过安装第三方扩展程序，可以实现更直观、持续性的流量监控，并按域名进行统计，方便长期观察特定网站的流量使用情况。
1、访问Chrome网上应用店，搜索关键词 "Traffic Monitor" 或类似功能的扩展（例如 "Data Saver"、"Bandwidth Plus"）。
2、选择评分较高且更新频繁的扩展，点击“添加至Chrome”进行安装。
3、安装完成后，该扩展的图标会出现在浏览器右上角的工具栏中。点击图标即可查看实时上传和下载速度。
4、部分高级扩展支持历史统计功能，可以查看过去一小时、一天或一周内，不同网站所消耗的累计流量数据。
5、在扩展的设置中，可以配置警报阈值或启用隐私模式，避免在敏感网络环境下被监控。
三、通过chrome://net-internals内部页面监控
chrome://net-internals 是一个隐藏的诊断页面，提供了对浏览器网络栈的底层视图，其中包括带宽使用情况的汇总信息。
1、在Chrome地址栏中输入 chrome://net-internals/#bandwidth 并回车访问该页面。
2、页面会显示一个名为“Capture”的区域，其中列出了自上次重置以来，浏览器在不同网络操作类型下的字节计数。
3、点击 Reset 按钮可以清零当前统计数据，以便从一个干净的状态开始测量特定网页的流量消耗。
4、访问目标网页并进行交互后，返回此页面查看各分类（如HTTP缓存、套接字读写）的字节数变化，从而估算总流量。
