在 Chrome 中以编程方式开始性能分析

Question

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

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

CMD + Shift + E 重新加载页面并立即开始分析，这缓解了对齐问题，但它仅运行s 持续 3 秒，如所述。所以这行不通。

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

Answer 1

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

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

Answer 2

如果您仍然感兴趣，或者其他人可能会觉得它有帮助，可以使用 Puppeteer's tracing class.
来实现这一点。 Puppeteer 在后台使用 Chrome DevTools Protocol's Tracing Domain，并将一个 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 协议的 API 交互（参见上面的 link）。由于 Puppeteer 比 CDP 的 API 提供了更高级别且易于使用 API，因此我没有对该选项进行过多研究。您还可以通过 Puppeteer's CDPSession API 直接与 CDP 互动。

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

在 Chrome 中以编程方式开始性能分析

Programmatically start the performance profiling in Chrome

google-chrome

performance-testing

google-chrome-devtools