Using DevTools Features Without Opening DevTools

I commonly see questions along the lines of "I really like feature X of DevTools, but it stops working when I close DevTools. How do I keep feature X running even when DevTools is closed?"

The short answer is: you probably can't.

However, 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.

For example, the script below lets me overlay the FPS Meter over the top-right of the viewport, even though DevTools never opens, as you can see in the video below.

// Node.js version: 8.9.4
const puppeteer = require('puppeteer'); // version 1.0.0

(async () => {
  // Prevent Puppeteer from showing the "Chrome is being controlled by automated test
  // software" prompt, but otherwise use Puppeteer's default args.
  const args = await puppeteer.defaultArgs().filter(flag => flag !== '--enable-automation');
  const browser = await puppeteer.launch({
    headless: false,
    ignoreDefaultArgs: true,
    args
  });
  const page = await browser.newPage();
  const devtoolsProtocolClient = await page.target().createCDPSession();
  await devtoolsProtocolClient.send('Overlay.setShowFPSCounter', { show: true });
  await page.goto('https://developers.google.com/web/tools/chrome-devtools');
})();

This is just one of many, many DevTools features that you can potentially access via the Chrome DevTools Protocol.

A general suggestion: check out the Puppeteer API before resorting to creating a DevTools Protocol client. Puppeteer already has dedicated APIs for many DevTools features, such as code coverage and intercepting Console messages.

If you need help accessing a DevTools feature via Puppeteer, ask a question on Stack Overflow.

If you want to show off a Puppeteer script that makes use of the DevTools Protocol, tweet us at @ChromeDevTools.