← Back to the listJanuary 17, 20192 mins read — js, node

Using Chrome Dev Tools in Node

I love playing with headless Chrome and puppeteer, writing scripts automating processes or testing websites. But did you know you could access the Chrome Dev Tools in your node scripts? No? Me neither 🤯

It’s super simple, all you need to do is:

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Create a client to access dev tools functionality
  const client = await page.target().createCDPSession();

  await client.send("Emulation.setCPUThrottlingRate", {
    rate: 2
  });

  // Do whatever you actually wanted to do!
})();

More on the CDPSession can be found here, all available options from the dev tools protocol can be found here.

Why would you want that

As mentioned in the tweet, Dev Tools give you a lot of power to manipulate your website and the environment it is shown in. If you use puppeteer (or other headless Chrome abstractions) for example to test your website, you can use this to test on different network speeds, potentially catching issues for slow networks that you wouldn’t find otherwise. But even beyond network speed, the dev tool protocol has so many features, making this a very powerful tool no matter what you want to do.

In general I just find the posibility to get access to the Dev Tool features within node exiting and will definitely play around with it when I get the chance 😊

The puppeteer docs are a good read and full of gems like this: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md