Chrome Dev Tools Network Traffic

This video continues my series on how to use the Chrome Dev Tools.
This tutorial explains how the Network tab works and how you can understand how the browser is handling all the HTTP Requests and Responses made by your web page, your CSS, and by your scripts.
Code used in video: gist.github.com/prof3ssorSt3v...
Chrome Dev Tools playlist: • Getting Started with D...

[@itsatomtech]

Every day feels like a class by watching here, back on old days, now this Dev tools are really that powerful, still wonder why most webdev classes didn't have lessons for this...

[@SteveGriffith-Prof3ssorSt3v3]

Only because I hadn't made the videos yet. 😉

[@paperC_CSGO]

These deep dive videos on a very specific details is super helpful. Most tutorials out there are about fancy frameworks, I love that you focus on the big picture stuff. More of these, please!

[@brucewayne252]

Feeling good about watching this video. It was very useful and informative. One must master developer tools early on if they want to ensure quick progress in their web development journey. It keeps things interesting and keep one involved.

[@cafeden6868]

This is very useful for troubleshooting web app. Thank you!

[@Necromancer-kz4rx]

The way you discussed the details is super awesome! Keep up the good work! Thank you.

[@ead5590]

Thanks a lot for this Steve. This is why I much prefer to keep an open mind because there always is something that I didn't know in the past and thanks to you, now I do. This whole Chrome Development Tool series is really amazing. 😆

[@hayslip001]

Thank you for this video - really helpful!

[@AndrewDevUA]

Awesome explanation as usual!

[@pjosxyz]

Smashing content as always 👍

[@NedumEze]

This is my very first real exposure to the Web's under-the-hood stuff! How wonderful and educational. Maybe, Prof may consider a follow-up on this to demonstrate how to solve problems found during Network Troubleshooting. For example, if I see that my CSS didn't load, or took too long to load, what should I do?

[@SteveGriffith-Prof3ssorSt3v3]

Lots more to come

[@NedumEze]

@@SteveGriffith-Prof3ssorSt3v3 Thanks. Looking forward, sir.

[@kirillzlobin7135]

That would be great to see how chache in browser works, and what exactly can be chached

[@mak271979]

Hi Steve, the video was very helpful. Thanks for teaching some of the fundamentals of Dev Tools. I want to learn more about HAR files and analyze. Could you please make a video on that?

[@SteveGriffith-Prof3ssorSt3v3]

If you want, you can post tutorial requests in the comments here - kzbin.info/www/bejne/gnTIq5SuZ9qBacU

[@HaifengZhu-pn3uq]

very, very...helpful

[@Gauss6174]

is that pre-flight call supposed to be made before any http calls? also if u don't disable cache, does the pre-fligth call still performed again whenever u refresh the page?

[@SteveGriffith-Prof3ssorSt3v3]

The preflight calls are made before any cors fetch call. The response can be cached too, just like other requests

[@Gauss6174]

@@SteveGriffith-Prof3ssorSt3v3 🙏

[@DavidAllan-zs5mf]

interface pixel 8