如何使用 Puppeteer 獲取請求的原始下載大小？

Question

也就是說，跨所有資源（包括視頻/媒體）下載的數據總量，類似於 Chrome DevTools 的“網絡”選項卡返回的數據量。

Answer 1

截至 2018 年 1 月，似乎沒有任何方法可以使用所有資源類型（偵聽視頻的response事件失敗），並且可以正確計算壓縮資源。

最好的解決方法似乎是監聽Network.dataReceived事件，並手動處理該事件：

const resources = {};
page._client.on('Network.dataReceived', (event) => {
  const request = page._networkManager._requestIdToRequest.get(
    event.requestId
  );
  if (request && request.url().startsWith('data:')) {
    return;
  }
  const url = request.url();
  // encodedDataLength is supposed to be the amount of data received
  // over the wire, but it's often 0, so just use dataLength for consistency.
  // https://chromedevtools.github.io/devtools-protocol/tot/Network/#event-dataReceived
  // const length = event.encodedDataLength > 0 ?
  //     event.encodedDataLength : event.dataLength;
  const length = event.dataLength;
  if (url in resources) {
    resources[url] += length;
  } else {
    resources[url] = length;
  }
});

// page.goto(...), etc.

// totalCompressedBytes is unavailable; see comment above
const totalUncompressedBytes = Object.values(resources).reduce((a, n) => a + n, 0);

Answer 2

如果您使用的是 puppeteer，那么您有服務器端節點...為什么不通過流或流來管道請求，然后計算內容大小？

還有https://github.com/watson/request-stats

您也可能想調用 page.waitForNavigation 因為您可能正在處理異步時間問題

Answer 3

@mjs的解決方案即使在2021年也能完美運行。只需要替換：

page._networkManager -> 頁面。 _frameManager ._networkManager

對我有用的完整示例：

const resources = {};
page._client.on('Network.dataReceived', (event) => {
  const request = page._frameManager._networkManager._requestIdToRequest.get(
    event.requestId
  );
  if (request && request.url().startsWith('data:')) {
    return;
  }
  const url = request.url();
  const length = event.dataLength;
  if (url in resources) {
    resources[url] += length;
  } else {
    resources[url] = length;
  }
});

await page.goto('https://stackoverflow.com/questions/48263345/how-can-i-get-the-raw-download-size-of-a-request-using-puppeteer');

const totalUncompressedBytes = Object.values(resources).reduce((a, n) => a + n, 0);
console.log(totalUncompressedBytes);

Answer 4

const imgaes_width = await page.$$eval('img', anchors => [].map.call(anchors, img => img.width));
const imgaes_height = await page.$$eval('img', anchors => [].map.call(anchors, img => img.height));