google-chrome - 可以使用 Puppeteer 从无头 chrome 以编程方式生成 har 文件吗？

Question

我想使用 puppeteer 控制无头 chrome 实例，拍摄快照并单击各种页面元素，同时捕获 har 文件。这可能吗？我查看了API，但没有发现任何有用的东西。

Answer 1

Puppeteer 中没有 HAR 生成器助手。但是您可以使用它chrome-har来生成 HAR 文件。

const fs = require('fs');
const { promisify } = require('util');

const puppeteer = require('puppeteer');
const { harFromMessages } = require('chrome-har');

// list of events for converting to HAR
const events = [];

// event types to observe
const observe = [
  'Page.loadEventFired',
  'Page.domContentEventFired',
  'Page.frameStartedLoading',
  'Page.frameAttached',
  'Network.requestWillBeSent',
  'Network.requestServedFromCache',
  'Network.dataReceived',
  'Network.responseReceived',
  'Network.resourceChangedPriority',
  'Network.loadingFinished',
  'Network.loadingFailed',
];

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

  // register events listeners
  const client = await page.target().createCDPSession();
  await client.send('Page.enable');
  await client.send('Network.enable');
  observe.forEach(method => {
    client.on(method, params => {
      events.push({ method, params });
    });
  });

  // perform tests
  await page.goto('https://en.wikipedia.org');
  page.click('#n-help > a');
  await page.waitForNavigation({ waitUntil: 'networkidle2' });
  await browser.close();

  // convert events to HAR file
  const har = harFromMessages(events);
  await promisify(fs.writeFile)('en.wikipedia.org.har', JSON.stringify(har));
})();

在这里您可以找到有关此解决方案的文章。

Answer 2

@Everettss 提出的解决方案是唯一的选择（到目前为止），但不如保存在浏览器中的 HAR。看看这个，在这两种情况下，我都为 google.com 页面生成了 HAR。在顶部，您有由 puppeteer-har（使用 chrome-har）生成的 HAR。这里的请求太少，没有主要文档的指标，奇怪的时间不同。

Puppeteer 不是 HAR 文件的完美选择。因此我建议使用https://github.com/cyrus-and/chrome-har-capturer