如何使用Puppeteer获取网络流量指标、传输数据及完成时间

以下是通过Puppeteer获取总网络传输流量、资源大小和任务完成时间的具体实现方案：

核心思路 #

借助Puppeteer的网络事件监听能力，追踪每个请求的传输数据；通过时间戳计算任务耗时，最终将统计结果转换为指定单位。

完整实现代码 #

const puppeteer = require('puppeteer');

(async () => {
  // 记录任务启动时间戳
  const taskStart = Date.now();
  
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();

  // 初始化统计变量（单位：字节）
  let totalTransferredBytes = 0;
  let totalResourceBytes = 0;

  // 监听所有请求完成事件
  page.on('requestfinished', async (request) => {
    const response = await request.response();
    if (!response) return;

    // 获取实际网络传输的字节数
    const transferred = response.bytesReceived();
    // 获取资源原始大小（优先取响应头的content-length，无则读取响应体长度）
    const contentLength = response.headers()['content-length'];
    const resourceSize = contentLength ? parseInt(contentLength, 10) : (await response.buffer()).length;

    totalTransferredBytes += transferred;
    totalResourceBytes += resourceSize;
  });

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

  // 计算任务耗时并转换单位
  const taskEnd = Date.now();
  const taskDurationMin = ((taskEnd - taskStart) / 1000 / 60).toFixed(2);

  // 转换流量和资源大小单位
  const totalTransferredKB = (totalTransferredBytes / 1024).toFixed(2);
  const totalResourceMB = (totalResourceBytes / (1024 * 1024)).toFixed(2);

  // 输出统计结果
  console.log(`总网络传输流量: ${totalTransferredKB} kB`);
  console.log(`总资源大小: ${totalResourceMB} MB`);
  console.log(`任务完成时间: ${taskDurationMin} 分钟`);

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

关键细节说明 #

• 网络事件监听：使用requestfinished事件捕获所有成功完成的请求，确保统计数据完整；若需统计失败请求，可额外监听requestfailed事件。
• 传输流量计算：response.bytesReceived()返回的是实际从网络接收的字节数（包含压缩、缓存命中时的少量传输），符合真实网络流量统计需求。
• 资源大小计算：优先读取响应头的content-length（资源原始大小），若响应头未提供则直接读取响应体长度，保证数据准确性。
• 页面加载判断：waitUntil: 'networkidle2'会等待页面加载完成后，网络中活跃请求不超过2个时再继续执行，避免遗漏后续加载的资源。

统计效果示例 #

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