'How to print the raw devtools request sent by Puppeteer?

I see that Puppeteer used devtools protocol. I want to see what requests are sent by Puppeteer.

https://github.com/puppeteer/puppeteer

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})();

How can I modify the above simple program to print the devtools requests sent by Puppeteer?

Edit

As the code is in Nodejs, I added the tag nodejs because the solution may be in Nodejs instead of Puppeteer.

Edit

Fiddler is mentioned as relevant. So I add this tag as well.

node.jspuppeteerfiddlerchrome-devtools-protocol


Solution 1:[1]

You could use chrome-protocol-proxy it captures all the CDP messagee. There are few extra steps involved here.

  1. Run google chrome in debug mode
  2. start chrome-protocol-proxy
  3. Start puppeteer using puppeteer.connect()

Run following commads, you may have to change them accordingly

google-chrome-stable --remote-debugging-port=9222 --headless  # run chrome
chrome-protocol-proxy     # to display CDP messages

Remove this line from your code

const browser = await puppeteer.launch();

Add this line

const browser = await puppeteer.connect({"browserURL":"localhost:9223"});

Instead of browserURL you can give browserWSEndpoint which you will get by cURL on localhost:9223/json/version

If you want to go more into detail of CDP and puppeteer you might want to look at Gettig Started with CDP

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions