Puppeteer DevTools Network объем полученных данных

Question

Как можно получить объем полученных данных через puppeteer? Возможно как то через консоль? window.performance?

JSHeapTotalSize, если я правильно понял, это используемая память для js

Answer 1

Рабочий способ для playwright. Думаю, переписать на другой фреймворк для e2e тестов не будет сложно

const { chromium, devices } = require('playwright');

const browser = await chromium.launch();
const context = await browser.newContext(devices['Desktop Chrome']);
const page = await context.newPage();

await page.route("https://acmecorporation.com/api/v1/oauth/token/", async (route) => {
  const response = await route.fetch();
  const json = await response.json();

  console.log(json); // Тут вы можете посчитать размер или что нибудь ещё

  await route.fulfill({ response, json });
});

await page.goto('https://acmecorporation.com/');

Answer 2

Пример подсчёта реализованного в лоб. Ответы разархивированы.

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();
page.on('response', async (response) => {
  if (response.ok()) {
    const buf = await response.buffer();
    console.log(response.request().url(), buf.length);
  }
});
await page.goto('https://ru.stackoverflow.com/q/1549429/2659', {
  waitUntil: 'networkidle0',
});
await browser.close();

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js 97163
https://cdn.sstatic.net/Img/hero/anonymousHeroAnswers.svg?v=d5348b00eddc 510

Пример подсчёта через devTools:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();
const devTools = await page.target().createCDPSession();
await devTools.send('Network.enable');

const devToolsResponses = new Map();
devTools.on('Network.responseReceived', (event) => {
  devToolsResponses.set(event.requestId, event.response);
});
devTools.on('Network.loadingFinished', (event) => {
  const response = devToolsResponses.get(event.requestId);
  const encodedBodyLength =
    event.encodedDataLength - (response.headersText?.length ?? 0);
  console.log(`${encodedBodyLength} bytes for ${response.url}`);
});

await page.goto('https://ru.stackoverflow.com/q/1549429/2659', {
  waitUntil: 'networkidle0',
});

await browser.close();

34592 bytes for https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
683 bytes for https://cdn.sstatic.net/Img/hero/anonymousHeroAnswers.svg?v=d5348b00eddc

_{node v21.1.0, puppeteer v21.5.0}

БЛОГ НА HUSL

Puppeteer DevTools Network объем полученных данных

Ответы (2 шт):