Programmatically start the performance profiling in Chrome

Question

Is there a way to start the performance profiling programmatically in Chrome?

I want to run a performance test of my web app several times to get a better estimate of the FPS but manually starting the performance profiling in Chrome is tricky because I'd have to manually align the frame models. (I am using this technique to extract the frames)

CMD + Shift + E reloads the page and immediately starts the profiling, which alleviates the alignment problem but it only runs for 3 seconds as explained here. So this doesn't work.

Ideally, I'd like to click on a button to start my test script and also starts the profiling. Is there a way to achieve that?

OPearl · Accepted Answer · 2020-03-28T16:17:13.217

in case you're still interested, or someone else may find it helpful, there's an easy way to achieve this using Puppeteer's tracing class.
Puppeteer uses Chrome DevTools Protocol's Tracing Domain under the hood, and writes a JSON file to your system that can be loaded in the dev tools performance panel.
To get a profile trace of your page's loading time you can implement the following:

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();
})();

Of course, you'll have to install Puppeteer first (npm i puppeteer). If you don't want to use Puppeteer you can interact with Chrome DevTools Protocol's API directly (see link above). I didn't investigate that option very much since Puppeteer delivers a high level and easy to use API over CDP's API. You can also interact directly with CDP via Puppeteer's CDPSession API.

Hope this helps. Good luck!

This looks great! Thanks a lot for sharing the snippet. – F Lekschas Mar 29 '20 at 01:50 — F Lekschas, Mar 29 '20 at 01:50

score 0 · Answer 2 · answered Jun 21 '19 at 07:39

You can use the chrome devtools protocol and use any driver library from here https://github.com/ChromeDevTools/awesome-chrome-devtools#protocol-driver-libraries to programmatically create a profile.

Use this method - https://chromedevtools.github.io/devtools-protocol/tot/Profiler#method-start to start a profile.

Programmatically start the performance profiling in Chrome

2 Answers2