Demystifying the Browser Networking Tab in Developer Tools With Examples

[@hnasr]

Got answer from Google, connection id 0 means devtools could not figure out the id .. they will fix that to null so to avoid the confusion twitter.com/JecelynYeen/status/1326467885070393344?s=20

[@emonymph6911]

You're AMAZING!! :O PLEASE PLEASE PLEASE Make a 'Chrome Developer Tools' playlist series. And have one video per tab, some vids might be short some long! But that's ok!

[@jeremybacani]

From someone semi-technical - thank you for the clarifying content. Love referring back to your videos when I don't quite grock the concept in the wild

[@6s6]

Fantastic video. Going straight to your "How KZbin Efficiently Streams Videos Through HTTP" video now. Love your content.

[@hnasr]

enjoy! thanks for watching

[@arzz11]

You are a gem in this community. Thanks for sharing... Love your channel... 👍👍👍

[@chickmagnet2067]

You taught Chrome dev tools better than Google dudes on YT. Amazzzing!!

[@wepranaga]

value packed content as always 💪 your channel is a resource. repository of knowledge 🙏

[@ashish1122000]

This channel is GOLD. Gold. Gold. Gold.

[@berrec2650]

Fantastic, thanks so much, I real eye opener on who is on the network

[@MedoMedo-op3em]

ِ شكراً يا بن ناصر Amazing bro, Thank you for valuable content

[@kirillzlobin7135]

So detailed videos. Thank you for your job. You are amazing

[@rajnishpsinha4683]

It was a great video, you got network tab, really demystified for me! Thanks!

[@lord12790]

Great video, but redirections are mainly for Google Analytics, I think this is due to Google Analytics SDK does these internally and developer has no control over it, might google can optimize these once http3 is widely used, they might be checking browser support for different things this is why so many redirections from HTTP/1.1 to direct HTTP3.

[@GuidedOnes-byRaiven]

Thank you brother. Take love

[@shubhammatsagar2344]

00:02 Demystifying the dev tools network tab 02:12 Understanding the HTTP 1.1 protocol and its implications for TCP connections. 04:17 Exploring different types of requests and their responses 06:30 Understanding TCP connections and request handling in the browser networking tab. 08:39 Demystifying TCP connections and HTTP 3 redirection 10:58 Explanation of browser networking with examples 13:08 Avoid unnecessary redirection for better performance. 15:20 HTTP/2 allows multiple requests to be sent simultaneously. 17:18 Facebook is using the latest version of quick, H329, and HTTP 3. 19:14 Understanding how the client and server communicate with different protocols

[@chetansoni2795]

I think the connection 0 means when the server know the upcoming request will be redirected anyway, it might be closing the connection immediately with ID 0. 0 only coming when there is a redirection either 302 or 307 The quick protocol http29 or httpQ3 are also using connection ID 0

[@Gauss6174]

thaks man, i learned a lot from u, did a great job of teaching

[@jupudimanikantaswamy1602]

Thanks Hussein.

[@tekforge]

I like the insights you give, Hussein! I would like to ask, according to your experience, do you recommend that a REST API returns the total list of items in the responses of create/update/delete requests or just the created/updated entity? I've seen apps, that send the GET all Items request to the API after successful create/update/delete requests in order to show on the UI the updated list of data. But this approach increases the number of sent API requests. I also don't like that the UI updates the list of data by itself after create/update/delete, because this requires a lot of parsing and looping & with logic on the client side, we risk having/showing a state of data on the UI that is different from the real state of data in the DB/backend. I appreciate your feedback!

[@debugmedia]

Amazing! Out of topic question: How do you take backup of files in the server and database everyday? And where do you store them? Do you store them places like local computer or git ?

[@KDOERAK]

Again a very informative vid - these 20 minutes watching were well spent - thank you Hussein!

[@shynggyskassen942]

Thank you Hussein

[@Finn-jp6pn]

Thank you for this!! There aren't many good resources on Chrome Dev Tools out there

[@rohitkijbile]

Please do a video on the waterfall as well

[@aatifnazar8203]

GOLD

[@boopfer387]

yes thank you sir

[@arvindk4813]

Wow it's gonna be useful. Thank you so much 😁

[@themoon6612]

i have one doubt, initailly you said that for HTTP/1.1 each request is made on a single TCP connection id at a given time, but then at 7:31 we see that two requests are initiated one by one on same TCP connection... what is the correct understanding for this? former part or later

[@ahmedkhudhair8035]

Demystify , great word

[@spiritualacts6357]

one way to understand the backend

[@fazlesaifullah]

amazing vid, really beneficial 👏

[@upengan78]

Thank you sir, as always.

[@salieflewis]

How are you able to quickly zoom in on specific elements of your screen while recording?

[@javedutube10]

The only thing i didn't understood is how you manage time to this stuff :). Love from india.

[@hnasr]

I wake up at 5am every day and finish working by 5pm, plenty of the time 😊

[@javedutube10]

@@hnasr I'll try to do same, thanks.

[@tarekali7064]

thanks hussein

[@jeenKah]

@hnasr what does Remote Address for a resource mean ? Does it mean that the Resource is hosted on that particular remote address ?

[@fazlesaifullah]

Can i suggest if you can make another few videos like this BUT for dev tools on other browsers. All other popular browsers other than chrome

[@rajashekhar433]

Thanks for the video and Google Analytics for tracking use behavior right? Can you please provide road map for nodejs

[@AbhilashKulkarni1410]

Can't find a reliable place to confirm this, but the connection id for google and facebook request might be 0 because they are using QUIC which is built over UDP so there is no possibility of a TCP connection id

[@hnasr]

Got answer from Google, connection id 0 means devtools could not figure out the id .. they will fix that to null so to avoid the confusion twitter.com/JecelynYeen/status/1326467885070393344?s=20

[@9fruitstudios276]

What does the request mean? I understand that you should have less request as possible. Is it the amount of request that the server has request in order to load your website? Thanks.

[@tejasvaniya2664]

How can you find at what time the request got initiated by end user

[@timmy5362]

Hi Hussein, Thanks a lot for your videos! Your Udemy course is great too! Sorry for the noob question! But why do we see so many files requested when we open the website in the Network tab? it varies from website to website as well! Does the backend engineer have to worry about sending those files seperately?

[@neoesm]

Short answer: no. Neither the backend nor the frontend have to worry about those files in almost all cases. Frameworks like React /(Next)/ Vue, etc. automatically do this. If you try to open those files it will look gibberish cause it's the output of build tools minification (lookup JS esbuild, webpack, bundling, transpilation ... all are relevant)

[@deweygamble3691]

Hussein how can I tell if it is a word press site or standard html I want to build a html website instead of a word press site

[@sushantroy01]

Getting 404 of my style.css in status section of network tab. Kindly guide me through this error...😢

[@ujjwalbansal1070]

this is amazing......

[@MrAbingPj]

How can we hide the response?

[@cosmicduality1341]

I am running 3 gpt-4, they constantly use the 700 tb That is meant for one. They become more stupid, Please i need advice on how to pitch 1 G4 and repair the scriptprocessernode (URL) The account is way too full Help please.

[@thisisthebestid]

Is there a way to find the total page load time?

[@gaddamvinaychandrareddy5207]

performance??

[@_chidiebere4763]

I love u already 😆

[@youruncle749]

ي هندسه ازاي اغير ملف من ملفات النتورك دي عايز العب ف ملف معين و اغير البيانات ال فيه ازاي ؟؟؟

[@domaincontroller]

I love you !

[@mohanajay2828]

Hello

[@adeel3797]

14:30 😂😂😂

[@graykaufmann]

Timestamps?

[@rameshd8436]

Bradman speaking ohh used recorder test voice

[@rogercastellanosfernandez1349]

d

[@suryaram6678]

diuimib vidieioi

[@earnings_cc]

Why didn't you just look at the actual website ?!?

[@chetansoni2795]

Because he is explaining the network tab for this particular website.