如何使用Puppeteer获取请求的原始下载总大小（含所有资源）？

嘿，我来一步步教你怎么用Puppeteer统计页面所有资源的总下载数据量，效果和Chrome DevTools的Network标签完全对齐～

核心思路 #

我们需要监听页面每个请求的完成事件，然后累加每个资源的实际下载字节数（或者原始内容大小，看你需求）。Puppeteer提供了requestfinished事件，刚好能捕获每个成功完成的请求，再结合响应对象的属性就能拿到我们要的数据。

代码实现（统计实际下载大小，对应DevTools的Size列） #

这个是最常用的场景，统计的是从网络实际下载的字节数（如果服务器开了压缩，就是压缩后的大小，和DevTools里的Size列完全一致）：

const puppeteer = require('puppeteer');

(async () => {
  // 启动浏览器并打开新页面
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 初始化总下载大小变量
  let totalDownloadSize = 0;

  // 监听每个请求完成的事件
  page.on('requestfinished', async (request) => {
    try {
      const response = await request.response();
      if (response) {
        // _bytesReceived是Puppeteer内部记录的实际下载字节数
        const bytesReceived = response._bytesReceived;
        if (bytesReceived) {
          totalDownloadSize += bytesReceived;
        }
      }
    } catch (err) {
      // 忽略请求取消或其他异常情况
      console.warn('处理请求时出现小问题:', err.message);
    }
  });

  // 访问目标页面，waitUntil确保页面加载完成（网络空闲状态）
  await page.goto('https://your-target-url.com', { waitUntil: 'networkidle2' });

  // 格式化输出结果
  console.log(`总实际下载大小: ${(totalDownloadSize / 1024 / 1024).toFixed(2)} MB`);
  console.log(`总下载字节数: ${totalDownloadSize} bytes`);

  await browser.close();
})();

统计原始内容大小（对应DevTools的Content列） #

如果你需要统计未压缩的原始内容大小（也就是DevTools里的Content列），可以读取响应头里的content-length字段：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  let totalOriginalSize = 0;

  page.on('requestfinished', async (request) => {
    try {
      const response = await request.response();
      if (response) {
        // 从响应头获取原始内容长度
        const contentLength = response.headers()['content-length'];
        if (contentLength) {
          totalOriginalSize += parseInt(contentLength, 10);
        }
      }
    } catch (err) {
      console.warn('处理请求时出现小问题:', err.message);
    }
  });

  await page.goto('https://your-target-url.com', { waitUntil: 'networkidle2' });

  console.log(`总原始内容大小: ${(totalOriginalSize / 1024 / 1024).toFixed(2)} MB`);
  console.log(`总原始字节数: ${totalOriginalSize} bytes`);

  await browser.close();
})();

额外技巧 #

• 排除缓存资源：如果不想统计从缓存读取的资源，可以判断response.fromCache()，跳过缓存的请求：

  if (response && !response.fromCache()) {
    // 这里进行统计逻辑
  }
  

• 处理失败请求：如果要统计失败的请求（比如404、500），可以监听requestfailed事件，按需处理。
• 等待所有资源加载：waitUntil: 'networkidle2'表示等待网络连接数小于等于2且持续500ms，确保大部分资源都加载完成；如果需要更彻底，可以用waitUntil: 'load'，但会等待更长时间。

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