Using DevTools Features Without Opening DevTools using Puppeteer

Keeping a feature of the Chrome Devtools – such as the FPS Meter – running with the DevTools closed unfortunately is not possible (yet?). Kayce Basques provides us with a little workaround though:

You can hack together a Puppeteer script that launches Chromium, opens a remote debugging client, then turns on the DevTools feature that you like (via the Chrome DevTools Protocol), without ever explicitly opening DevTools.

const page = await browser.newPage();
const devtoolsProtocolClient = await page.target().createCDPSession();
await devtoolsProtocolClient.send('Overlay.setShowFPSCounter', { show: true });
await page.goto('https://example.org/');

Check out Chrome DevTools Protocol View for an entire list of commands you can send.

Using DevTools Features Without Opening DevTools →