3 ms·

Craft Chrome Devtools Protocol (CDP) commands with new command editor

94 points by keepamovin 1y ago

hackgician 1y ago
So many people building AI browsers definitely had this as an internal tool already lol, nice to see Chrome leaning in here; CDP is a huge pain to write and debug
- ghxst 1y ago
  I think they released this in 2023 somewhere, it's been hidden behind an experiment in the devtools settings.
aPoCoMiLogin 1y ago
very nice. there are things that won't show up in the network panel and you had to resort to proxy for debugging, especially when you are using puppeteer/etc for testing.
- ghxst 1y ago
  The absolute safest way to grab all traffic is capturing a netlog (https://www.chromium.org/developers/design-documents/network-stack/netlog/ https://www.chromium.org/developers/design-documents/network...) unfortunately there's been a lot of quirks with network captures through devtools and even with some of the recent bugfixes (https://issues.chromium.org/issues/40254754 https://issues.chromium.org/issues/40254754) they can still be lossy.
mihau 1y ago
FYI it's behind a feature flag (aka experiment). Just in case you rarely use experiments in DevTools: DevTools -> Settings (cog, top right) -> Experiments -> Search for "Protocol Monitor" -> Check the checkbox
mrasong 1y ago
Awesome, debugging is gonna be way easier from here on out.
vipvip 1y ago
[dead]
foofoo12 1y ago
Very useful. Does anything similar exists for Firefox?
- nicoburns 1y ago
  Servo have a 3rd party script to dump the traffic: https://book.servo.org/hacking/developing-devtools.html#capturing-and-processing-protocol-traffic https://book.servo.org/hacking/developing-devtools.html#capt... But there's nothing built-in.
- bryanrasmussen 1y ago
  I would look at the Browser Console if I were trying to do something similar https://firefox-source-docs.mozilla.org/devtools-user/browser_console/index.html https://firefox-source-docs.mozilla.org/devtools-user/browse... in fact this is similar to a thing I wanted to do recently that I was calling JIT automation (using FF's browser console) but when I wanted to write an article about it they weren't too interested because FF specific.
vipvip 1y ago
[dead]
nicoburns 1y ago
CDP is a good exmaple of why the ecosystem has converged around Chrome and not Firefox. CDP has: - Full documentation - A stable API - Tooling like this Firefox has none of that: implementing the firefox devtools protocol means reverse engineering it, and then sometimes it still breaks when Firefox updates!
- Un1corn 1y ago
  I haven't used the devtools protocol of Firefox but CDP is one of the worst protocols I had to work with. Everything is "experimental", inconsistencies between different domains, multiple ways to do some stuff and revealing internal stuff.
  - walls 1y ago
    Yep, in certain cases requests/responses will only show up in the Fetch domain, sometimes only in the Network domain, and sometimes neither!
  - kg 1y ago
    Seconding this, I've used CDP directly to solve problems and it's a horrible protocol with a really buggy implementation. The documentation is pretty sparse and the implementation is inconsistent with the documentation sometimes. It's true that if you want to know what a method is named and which parameters it takes you can find that out, but I rarely found the answers I actually needed to use things correctly.
    - keepamovin 1y ago
      I actually know CDP really well as I've used it extensively for a commercial product and found it to be the exact opposite. Admittedly there are undocumented things, and a learning curve, but it's been remarkably stable over the 7 years I've been deep into it. Is there something I can help you folks with? I'm happy to provide guidance on how to do a certain thing in CDP, or help you debug issues you might have encountered with it. Anyhow if you don't want to reply here, anyone with CDP questions or need feel free to reach out cris@dosaygo.com I can definitely help.
ecolonsmak 1y ago
Is this supported through the chrome dev tools mcp server?
giorgioz 1y ago
Can anyone tell me some use cases for CDP commands? In which situation is preferable to use CDP commands over Puppeteer?
- gwittel 1y ago
  Tools like Playwright and Puppeteer are abstractions on top of CDP. The other use case is when these frameworks don’t expose or don’t use a CDP command you need (often they hide some parameters for cross browser compatibility). Webdriver BiDi is a future cross browser replacement: https://www.w3.org/TR/webdriver-bidi/ https://www.w3.org/TR/webdriver-bidi/
  - youngtaff 1y ago
    Bidi’s not a viable replacement for some use-cases e.g. setting headers for just the main origin as it’s add header command adds the header to all requests potentially causing CORS issues
- youngtaff 1y ago
  Some things you can only do via CDP — last time I looked adding a HTTP header to requests that match a certain URL was only possible via CDP
bsimpson 1y ago
I believe CDP is how Decky Loader (the homebrew sidebar for SteamOS works). It attaches to the web app that draws SteamOS's UI and injects its own plugins to the sidebar.

94 points by keepamovin 1y ago

So many people building AI browsers definitely had this as an internal tool already lol, nice to see Chrome leaning in here; CDP is a huge pain to write and debug

ghxst 1y ago
I think they released this in 2023 somewhere, it's been hidden behind an experiment in the devtools settings.

aPoCoMiLogin 1y ago

very nice. there are things that won't show up in the network panel and you had to resort to proxy for debugging, especially when you are using puppeteer/etc for testing.

ghxst 1y ago
The absolute safest way to grab all traffic is capturing a netlog (https://www.chromium.org/developers/design-documents/network-stack/netlog/ https://www.chromium.org/developers/design-documents/network...) unfortunately there's been a lot of quirks with network captures through devtools and even with some of the recent bugfixes (https://issues.chromium.org/issues/40254754 https://issues.chromium.org/issues/40254754) they can still be lossy.

mihau 1y ago

FYI it's behind a feature flag (aka experiment). Just in case you rarely use experiments in DevTools: DevTools -> Settings (cog, top right) -> Experiments -> Search for "Protocol Monitor" -> Check the checkbox

mrasong 1y ago

Awesome, debugging is gonna be way easier from here on out.

vipvip 1y ago

[dead]

foofoo12 1y ago

Very useful. Does anything similar exists for Firefox?

nicoburns 1y ago
Servo have a 3rd party script to dump the traffic: https://book.servo.org/hacking/developing-devtools.html#capturing-and-processing-protocol-traffic https://book.servo.org/hacking/developing-devtools.html#capt... But there's nothing built-in.
bryanrasmussen 1y ago
I would look at the Browser Console if I were trying to do something similar https://firefox-source-docs.mozilla.org/devtools-user/browser_console/index.html https://firefox-source-docs.mozilla.org/devtools-user/browse... in fact this is similar to a thing I wanted to do recently that I was calling JIT automation (using FF's browser console) but when I wanted to write an article about it they weren't too interested because FF specific.

vipvip 1y ago

[dead]

nicoburns 1y ago

CDP is a good exmaple of why the ecosystem has converged around Chrome and not Firefox. CDP has: - Full documentation - A stable API - Tooling like this Firefox has none of that: implementing the firefox devtools protocol means reverse engineering it, and then sometimes it still breaks when Firefox updates!

Un1corn 1y ago
I haven't used the devtools protocol of Firefox but CDP is one of the worst protocols I had to work with. Everything is "experimental", inconsistencies between different domains, multiple ways to do some stuff and revealing internal stuff.
- walls 1y ago
  Yep, in certain cases requests/responses will only show up in the Fetch domain, sometimes only in the Network domain, and sometimes neither!
- kg 1y ago
  Seconding this, I've used CDP directly to solve problems and it's a horrible protocol with a really buggy implementation. The documentation is pretty sparse and the implementation is inconsistent with the documentation sometimes. It's true that if you want to know what a method is named and which parameters it takes you can find that out, but I rarely found the answers I actually needed to use things correctly.
  - keepamovin 1y ago
    I actually know CDP really well as I've used it extensively for a commercial product and found it to be the exact opposite. Admittedly there are undocumented things, and a learning curve, but it's been remarkably stable over the 7 years I've been deep into it. Is there something I can help you folks with? I'm happy to provide guidance on how to do a certain thing in CDP, or help you debug issues you might have encountered with it. Anyhow if you don't want to reply here, anyone with CDP questions or need feel free to reach out cris@dosaygo.com I can definitely help.

ecolonsmak 1y ago

Is this supported through the chrome dev tools mcp server?

giorgioz 1y ago

Can anyone tell me some use cases for CDP commands? In which situation is preferable to use CDP commands over Puppeteer?

gwittel 1y ago
Tools like Playwright and Puppeteer are abstractions on top of CDP. The other use case is when these frameworks don’t expose or don’t use a CDP command you need (often they hide some parameters for cross browser compatibility). Webdriver BiDi is a future cross browser replacement: https://www.w3.org/TR/webdriver-bidi/ https://www.w3.org/TR/webdriver-bidi/
- youngtaff 1y ago
  Bidi’s not a viable replacement for some use-cases e.g. setting headers for just the main origin as it’s add header command adds the header to all requests potentially causing CORS issues
youngtaff 1y ago
Some things you can only do via CDP — last time I looked adding a HTTP header to requests that match a certain URL was only possible via CDP

bsimpson 1y ago

I believe CDP is how Decky Loader (the homebrew sidebar for SteamOS works). It attaches to the web app that draws SteamOS's UI and injects its own plugins to the sidebar.