Intercept requests and responses with Chrome Devtools Protocol (UPDATES IN DESCRIPTION)

Level up your devtools skills: learn how to use the Chrome Devtools Protocol to intercept and modify responses on the fly before they are processed by Chrome.

Chrome devtools protocol links:

Puppeteer links:

[riverbrooks]

keep making videos man, you don't get enough credit!!! Amazing video.

[gioac]

This channel is a true hidden gem, keep up with the good work

[vcaalnu]

1:25 You can't interface with the Chrome DevTools Protocol directly within the JavaScript console of the browser itself. The protocol is typically interfaced programmatically using external tools and libraries that allow you to control Chrome or Chromium browsers.

[sandeshsmagdum]

Awesome video and powerful CDP feature. Thanks for creating this video :)

[Mukeshotwani]

Hi Jarrod, I loved your video, you got a new subscriber :) Keep posting such awesome videos.

[study]

waiting for your next videos on puppeteers.

[EmilyAnn]

this functionality is awesome!!!! Super straight forward too! *rolls eyes

[mfi]

You deserve more subs. Love your videos!

[anandcp]

Hi, Jarrod...Thanks for the Video.I have a question ...is it possible to hide request URL from developer tool (using Network.disable option)????if no what is the use of Network.enable and Network.disable options???

[nitishsharma]

Thanks Jarrod, this video is very helpful!

[HenryLeu]

How do I get the body response in the Network tab? I need to retrieve information for my automation testing. Java code is preffered. Thanks!

[TheAInfinity]

That Teemo behind you is so adorable. Where did you buy it from?

[avimehenwal]

excellent video :D Can CDP protocol also intercept ALL outgoing headers and add a Header to them ??
I used some plugins to do this, but downside is I cannot see the NEW (modified) calls in network inspector (which sucks when debuggin)
So I am looking for a solution where I can add headers to outgoing network calls and also be able to see them in Inspector ?
Any help is appretiated, thankyou so much :)

[bacboss]

can i scrape links from network tab on the inspector ?

[陈潜-yd]

Hi, I've tried puppeteer-interceptor to modify response content. But when I set response headers in the onResponseReceived function, it can't work, what should I do to modify response headers?

[cnikolov]

I find that useful using the extensions api so you can run your own personalised chrome instead of the puppeteer

[ffgcvs]

Is there a way to get specific resources from the network tab?

In my case, when we click on a website element which Google Analytics is configured, in the devtools network tab I can filter by the word "collect.js" and se the response body of the event.

I need to get some information of the response and store on a json.

[_ityadi]

Can we convert this script to a Chrome extension ?

[watherby]

How do I use the CDP without puppeteer? I mean how do I use the "RAW" protocol?.

[朱康宝]

is Deprecated, please use Fetch.enable instead. but the Fetch.enable how to use?