0

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
user1424739
  • 11,937
  • 17
  • 63
  • 152
  • why do you want to see them? and why do you want to print them from your program? it makes more sense to use Fiddler – Juraj Oct 21 '21 at 05:33
  • Fiddler is irrelevant as I am not debugging a web app. I am trying to see what is underlying puppeteer. – user1424739 Oct 21 '21 at 11:38
  • it uses webservices so it is possible to setup Fiddler as proxy. but why do you need it? – Juraj Oct 21 '21 at 11:40
  • I just want to see what is going on under the hood. How to use Fiddler to control devtools protocol? – user1424739 Oct 21 '21 at 11:42
  • under the hood there are webservice calls. chrome runs a webservice server. the protocol is documented here https://chromedevtools.github.io/devtools-protocol/ – Juraj Oct 21 '21 at 11:46
  • I want to have a way to translate whatever puppeteer code to devtools requests. Just a doc is not sufficient. – user1424739 Oct 21 '21 at 11:54
  • Fiddler acts as a HTTP proxy so you have to set HTTP proxy for Node.js and point it to 127.0.0.1:8888 – Juraj Oct 21 '21 at 12:45
  • but again. the details are boring. json sent forth and back. what is you goal? – Juraj Oct 21 '21 at 12:47
  • As I said, I just want to see what is going on under the hood. Please don't ask the same question again and again. – user1424739 Oct 21 '21 at 13:01
  • Maybe see "Listening to the protocol" here: https://chromedevtools.github.io/devtools-protocol/#monitor – vsemozhebuty Oct 21 '21 at 14:17
  • @vsemozhebuty How to send the request with websocat? I got this. `$ echo '{"command":"Page.captureScreenshot","parameters":{"format": "jpeg"}}' | websocat -n1 --jsonrpc ws://127.0.0.1:9222/devtools/page/FC28287234A1C005E927770F55793B1B {"error":{"code":-32700,"message":"JSON: comma or map end expected at position 37"}}` – user1424739 Oct 21 '21 at 14:21
  • That protocol definition looks like ProtoBuf. Fiddler is not good in visualizing ProtoBuf content. There was a plugin but it wasn't very good. A proxy that is good in ProtoBuf decoding is Charles Proxy. – Robert Oct 21 '21 at 16:20

1 Answers1

0

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

user_gautam
  • 191
  • 1
  • 7