以编程方式在 Chrome 中启动性能分析

Question

有没有办法在Chrome中以编程方式启动性能分析？

我想多次运行我的网络应用程序的性能测试以更好地估计 FPS，但在 Chrome 中手动启动性能分析很棘手，因为我必须手动对齐框架模型。(我正在使用这种技术来提取帧(

CMD + Shift + E 重新加载页面并立即启动分析，这缓解了对齐问题，但它只运行 3 秒，如此处所述。所以这是行不通的。

理想情况下，我想单击一个按钮来启动我的测试脚本，并启动分析。有没有办法实现这一目标？

Answer 1

如果您仍然感兴趣，或者其他人可能会发现它有帮助，那么使用Puppeteer的跟踪类可以轻松实现此目的。
Puppeteer在后台使用Chrome DevTools Protocol的跟踪域，并将一个JSON文件写入您的系统，该文件可以加载到开发工具性能面板中。
要获取页面加载时间的配置文件跟踪，您可以实现以下内容：

const puppeteer = require('puppeteer');
(async () => {
  // launch puppeteer browser in headful mode
  browser = await puppeteer.launch({
    headless: false,
    devtools: true
  });
  // start a page instance in the browser
  page = await browser.newPage();
  // start the profiling, with a path to the out file and screenshots collected
  await page.tracing.start({
    path: `tests/logs/trace-${new Date().getTime()}.json`,
    screenshots: true
  });
  // go to the page
  await page.goto('http://localhost:8080');
  // wait for as long as you want
  await page.waitFor(4000);
  // or you can wait for an element to appear with:
  // await page.waitForSelector('some-css-selector');
  // stop the tracing
  await page.tracing.stop();
  // close the browser
  await browser.close();
})();

当然，您必须先安装Puppeteer(npm i puppeteer(。如果您不想使用Puppeteer，可以直接与Chrome DevTools Protocol的API进行交互(请参阅上面的链接(。我没有研究这个选项，因为Puppeteer通过CDP的API提供了一个高级且易于使用的API。您还可以通过Puppeteer的CDPSession API直接与CDP交互。

希望这有帮助。祝你好运！

Answer 2

您可以使用

chrome devtools 协议并使用此处的任何驱动程序库 https://github.com/ChromeDevTools/awesome-chrome-devtools#protocol-driver-libraries 以编程方式创建配置文件。

使用此方法 - https://chromedevtools.github.io/devtools-protocol/tot/Profiler#method-start 启动配置文件。