可以使用Puppeteer从无头Chrome编程生成har文件吗？

Question

我想使用Puppeteer控制一个无头Chrome实例，拍摄快照并点击各种页面元素，同时捕获HAR文件。这是否可能？我查看了API，但没有找到有用的内容。

- Atlas1j

---

您可以使用 page.tracing https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-tracing 方法。您收集的数据包含 HAR 文件中的所有信息以及更多内容。 - Everettss

Answer 1

Puppeteer中没有HAR（HTTP存档）生成器助手。但是您可以使用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));
})();

这里可以找到一篇关于此解决方案的文章。

- Everettss

---

请注意，如果您需要将“响应正文”添加到HAR文件中，请使用此修订版本的代码：https://github.com/sitespeedio/chrome-har/pull/41#issuecomment-456913596 - weefwefwqg3

截至2023年，该文章的链接已失效 :( - undefined

Answer 2

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

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

- user1660210

---

Chrome-har-capturer会调用网站的JavaScript吗？ - weefwefwqg3

@weefwefwqg3 我刚刚测试了一下，但是好像不行。我对一个ReactJS SPA进行了测试，但是没有任何API调用被执行，很遗憾。 - se7entyse7en