Inspect Network Activity - Chrome DevTools 101

Learn how to use the most popular Chrome DevTools features related to inspecting network activity, including:

1:05 - View a chronological log of all network activity
3:26 - Show or hide columns in the Network Log
3:46 - Throttle network activity to simulate mobile experiences
4:46 - Inspect individual network resources in depth
5:23 - Search HTTP headers and response bodies
6:05 - Filter out resources you don't care about
7:51 - Block network requests

Links mentioned in the video:

[ighsight]

The single Chrome Dev Tool feature that I am most interested in learning about. Good job.

[dolphin]

Great 101. Wish this video existed when I was getting into DevTools years ago

Request blocking tip was 🔥

[svenvancrombrugge]

I spend a significant portion of my day watching that tab + logtails. It's really well designed and powerfull. Well done!

[shubhamtomar]

Special Thanks to Google Chrome Developers Team for this awesome playlist for learners
helpful playlist

[Retnuh]

This was such a great informative video. Sad that I just watched it now and not 5 years ago. Thanks Google for uploading this.

[AshishTiwari-qrrh]

Very helpful to understand the network panel basics and it's usage.

[viniciuscarneiro]

I didn't know about the command + click on the tabs.
Well done!

[avinashasp]

Hi Kayce Basques,


Thank you for the video. its very informative.
Could you please answer my query which confuses me a bit on load time.
my queries are - is DOMContentLoaded time and First meanful time is same? and Load time in the end of network tab(in red) is equal to total page load time?
kindly answer .it would be really helpful.

[avilde]

Stupid question but why is getstarted.html and main.css compressed size larger then original (uncompressed)? 2:21

[ammarhassan_]

I wonder who downvoted such a knowledgeable video. lol

[vbond]

Thanks, informative video. Search isn't working for me in the expected way though. Searching for cache-control only brings up the cache-control comment in the getstarted.html body. For some reason it isn't showing the cache-control in the headers of the png files and other resources. Still a good video, thanks

[vitabramov]

Great video, thanks!
It seems that devtools are missing only built-in webpack and git cli, and we almost ready to code right in it, without ide😉

[georgesjeandenis]

Do you know of a way to find a specific ad video ( as in an advertisement video ), instead of searching through chrome's history for a regular video?

Is it something that's even possible?

THANKS A LOT MAN.

[lcanpor]

Thanks a lot for this great 101. I have a question, I hope you can help me. Do you know how to track what/where a js request was triggered? Specially if the trigger is a method inside the code of the website.

[asu]

To access "Show overview" and "Use large request rows" click on the gear icon (upper right corner)

[softcoda]

Very helpful tutorial....Had been waiting for something like this.

[declantreanor]

Thanks, Is it possible to view the ultimate request that gets made; e.g.: if an api needed to call a secondary path to satisfy my request.

[Crimeprincess]

For beginners, where do you suggest we start?

[Chris-bthx]

I never noticed that mag glass search feature, thanks!

[lucasfreire]

Thanks for the video, very helpful for beginners!