Demystifying the Browser Networking Tab in Developer Tools With Examples

in this video we will demystify the dev tools network tab and we can understand all of this stuff guys including the protocol and all the other fields if you're interested to know this and interested to improve your back end and also possibly your your front end stay tuned for this video let's just jump into it hey guys what's going on my name is hussein and i discuss backend engineering on this channel and some of you asked me who's saying can you demystify the div tools tab because that tab is very very critical for diagnosing your your back end actually so what we're going to discuss here in this video is the network tab in devtools and you can access this network tab by going to these three dots in chrome or firefox i believe you can do the same thing more tools and then you click on developer tools and then click on the network tab and in the network tab we're going to explain all the fields in the network tab and the first example that we're going to take is actually going to example.org because that's the simplest site i could find to explain it and then after that we're going to go to a more complex site and explain more of the more complicated requests how about we jump into it so i'm going to example.com and i'm going to open the network tab and hit enter and the moment you do that you're going to get a one row in this table and this table says name that's the name of the resource you request method status protocol scheme remote address type initiator size time and connection id by the way you can add more cones by right clicking and just literally clicking there right and cookies all that stuff but i'm not really interested in the cookies per se but these all of this fields are really really valuable so how about we jump into it guys so what what what what did we do here we made uh a single request to example com the method http method was get and we talked about get and versus post check out the video right here if you want to learn more their status as a result coming back from the server say 200 that explain that tells me that the request was successful the protocol used to communicate with the back end is http one one and we talked about reversible to http one one http two cp10 hdb3 check out the video right here to learn more about http protocol but that tells me that this this is definitely a tcp connection that also tells me that um it is one of many connections possibly right because http 2 we multiplex however in http11 we create multiple tcp connection and kind of send multiple requests in each tcp connection each request is sent on a single tcp connection at a given time you can't send multiple requests in http 1 1 on a given tcp connection for a given time so the schema is http that means this is unencrypted and this is a good choice i explicitly picked this site so it's unencrypted domain is very important here so i added that so we're going to domain or example.org and i also added the remote address so you give you the actual ip address plus the port since it's unsecured also port 80 and that's the actual ip address of this thing type is document so i'm going to hide the type because it's not really relevant to what i'm going to explain i don't care what's the type of the stuff so i usually hide this i usually also had the initiator this is like front-end things for for people who actually in the front and want to know what made this request that's this is a good field but to me i'm just measuring i'm just checking the entire site right so i don't really care about that size is also good like what came back that's good time how long it took so 42 millisecond and connection id this is one of the most important one in my opinion okay the waterfall which is the actual breakdown i'm gonna make another video discussing the waterfall just because i don't want to make this video very long right so this is this is all the uh fields okay so what this is not a fancy request if you see what we did is like we made a git request and we got back the response headers and then that's it which is the html page right that's that's the content that is the response is just an html page so how about we do a little bit more of um more interesting requests i'm going to go to nginx.org let's clear this up nginx.org is also by default it doesn't have hsts which is the http strix transport security so it will not direct me to the https site despite there is an https endpoint but if i type it like that it will prefer this unsecured site so again i'm not going to explain this in this video i'm going to go through this so what happened here what do we see we see a bunch of lots of requests and i want you to pay attention so what happened here is we the first request that we made was to nginx.org and internet.org returned a big html file and the next step that the browser did uh browser literally froze she seriously browser all right guys i had to execute this because the browser just froze looks like we're doing so much all right so the first request we made was nginx.com uh i just did org and got the html page i'm not going to open it because this will freeze it again but this is a good method so this is just a safe hey give me what's going on but i did an http 1-1 the scheme is http it's not secure right so there is one tcp connection that we create in order to send that request and here here is the tcp connection four four five six three i i love absolutely love the fact that it is numbered because you know which requests belong to which tcp connection this is very critical for us right to know to understand how many tcp connections are there and then the next thing is like okay we have this the nginx so this is the ip address right and uh let's pay attention to the ip address and it better if it's the same connection id it better be the same ip address it doesn't otherwise doesn't make sense so talk once is 62 milliseconds to just retrieve that html page right then we followed it up with another request for some reason what are we asking for we're asking for the bng the first resource which is an image right so we're asking for an image this one of the page this one is the image and then follow using the same tcp connection so we had this had to queue up in order to be sent in the same tcv connection because we can you cannot use uh i take that back so the first request was sent to this tcp connection once we got the result back we use the same tcp connection to send another request on the same tcp connection http one one as well so and then we followed up with our javascript file that was sent on a different tcp connection why because it's not in the same domain this thing guys this is we're going to google tag manager.com so my here's what happened my assumption is nginx is trying to track us through google and facebook we're going to see facebook in in a while here going we're going to actually see facebook because they are tracking you so they can sell you their ebooks and stuff like that right through nginx ad through facebook ads and google ads right that's that's just this tracking mechanism and to do that what they do is in the html file they make a request to google tag manager or google analytics or all that stuff right when you do that by default the first attempt was an unsecure http request right and that returns 307. what's the 307 let's check 307 http code what was that i forgot temporary so that means hey redirect where where are we taking me what are you taking me go to the secure site so for some reason nginx the html had http access to that link right but that site so what do we do we establish a tcp connection right to this site we sent a request and we we were told to go somewhere else so we closed that tcp connection apparently and then we establish a brand new one using h3 which is http 3 q050 this is a specific quick version and i'm going to make a video talking about quick which is http 3 protocol specifically just for chrome chrome's implementation of quick and and this is the donation of uh the denotion q050 if you see h3-29 that's the official ietf uh htv3 okay so we're expressing is because we're on a chrome we're going to use chrome to do that right if you're on firefox you're gonna see i believe uh i believe you're gonna see the same same value i might be wrong there all right so we send that we send that information to the to the server right to their server and that's the ip address so we use the zero connection id here and now if i go on i you can start seeing the same pattern we're going to open a connectivity connection close it http redirect to another page right and the same thing we're opening to google analytics this time so imagine the work that the client is doing by just having all these ads right so much work so google analytics and then we made a request http uh 1-1 to whatever this thing flight funnel again another funnel right another ip address we recommend so many so many addresses google analytics this is this is the follow-up to this right that that explains why this has a unique dcb connection well this hasn't because they just closed this one because they're not going to reuse it right uh this was the redirect so we directed to https again we're going to use quick to do that and we're going to use google's implementation of quick because we're going to google analytics.com yeah and then the same thing we're redirecting from this one to this so that's a brand new tcp connection but okay guess what this one is https on port 443 on bright funnel but those guys don't support http two or three they support htv one one on top of tls okay so that's that explains why it's http one one so it's still tcp yeah it's tls so there we had did the handshake but we didn't use quick so it's not technically udp it's tcp right so so we're just going through this let's go one by one then google analytic again so there's another request right so what tells me they use the same tcp connection and that makes sense but look at this we we again made the same mistake by reconnecting to the http so the browser could optimize this i believe by avoiding to do this hey we just connected to this google ads why are you attempting to do it again the scheme is very very critical so that's why people tell you hey your index.html should all have https don't have this mixed mode max mode is bad because first of all because of performance second because of security you don't want to send unsecure requests at all through the wire because they can be man in the middle real hard and then another bright funnel api https uh through http one one and then look at this let's continue let's continue then we get to our google analytics doubleclick.com so that's also google then you always they use the google protocol here and they collect some information again no no no nothing of substance here nginx.org going to engineering.oh but we're just doing ads all the all just just requests to get ads right so um h3 not really to get ads but get tracked let's let's correct that statement so this is h3 q50 that's again it quick quick and then another request which will be redirected as we saw 307 go back to redirect to there's a lot of redirection this could be avoided so you can tweak your index.html page to be much much performance by just avoid all this redirection if you know a site will redirect don't put the original site put the destination the the final one to avoid all this stupid redirection so again we're using quick quick quick quick and then there's add roll here again so we did so that is just a request to roundtrip.js file again http 1 and then we're going to do it through https and then do it again through http it's just a bunch of them 302 what is 302 i forgot 302 http code what is that so that is found that means hey i found something let go and redirect to this i believe this is it has the same meaning if i'm not mistaken right exactly go to this location just hey i found what are you looking for but it's over here all of this redirection have similar meanings if you think about it all right look at this i'm gonna skip over this and this is one interesting part add d dot address.mgr.consensus.org is a different ip address but that puppy actually support h2 http 2. so that's over tcp so now if you the moment you start seeing that this better use the same tcp connection now once your http http but look at all the stuff that the ones that are http 1 1 everyone has a different tcp connection all right because we had to send those in parallel and since it's http 1 1 we couldn't send them in parallel without actually establishing multiple tcp connections and chrome that's the fact they use 6 tcp connection on http 1 1 per host so you cannot open more than t6 connections so you have a limit all of a sudden with http 2 you have around 200 requests simultaneously i think the stream size and that could be configured as well so four four nine eight five look at all this beautiful stuff all right so h2 and then look at this this is this is also h2 but this guess what this is a different tcp connection why because it's a different domain it's also a different ip address so that's that's a different things look at this why didn't we communicate in h2 because that's the same domain look no that's a no this is d dot address.com this is a dot addreal.com god nginx what are you doing guys i just literally took inject because it's it's doing so much stuff look at this we're going we're coming we're coming to facebook there you go i'm going to skip over this part because we just explained this too and all that stuff so i want to go to this connect.facebook.net we're going to facebook.net now so facebook.net i want to pay attention to this facebook we connected to facebook through the http unsecured protocol and that obviously since unsecured has to be hdb11 we don't support uh uh unsecured http 2 or 3 for that matter all right it's just it's a bad idea protocol certification what's not um connect i want you to just see a lot of requests for d address on http 2 all of them has the same tcp connection that's a beautiful thing right because we're multiplexing all of these requests we sent them at the same time we can because htv2 and in the same tcp connection this is different this is a different tcp connection now once you see zero i need to understand what the semantic of zero but i think it was a temporary connection that is closed it was open and then closed that's my understanding or the main tcp connection kind of thing i'll need to connect contact with the some some of my contacts at google too essentially explain that to me but that's my understanding here all right so we have that and then here look at this this guy facebook we talked we made a video discussing facebook moving completely too quick so here's a proof facebook we're going to facebook.net we're using quick and guess what it's now different version of quick than the one we saw with google this is h329 this is the final i don't know if it's the final and this is the latest quick specification as far as we know uh from the quick uh team and http 3. so that's they're using the latest and greatest they they they implemented their own version but that is h3 nonetheless right so look at this stuff they're using h3 so now we're going to google i'm going to facebook and now just all of a sudden facebook know that i have interest in facebook why all of a sudden facebook knows now that i have interest in nginx and if i can now right a click and say cookies i bet you that the cookies has also been sent right uh somewhere here did i specify the cookies do you see the cookies guys i don't see them there you go the cookies i don't know what that is it says zero ah maybe they weren't a set oh yeah this is that by the way this is an incognito mode that's why it didn't send but if i had any cookies it would have been sent with this so yeah same ipad as again same dcp connection not really tcp because this is quick so it's udp it is a logical connection nevertheless but sure and http one one we're going another domain here so same thing new typication and oh look at that apparently yeah who knows that i have interest on nginx now look at those this beautiful stuff all right all right all right all right oh and guys as you can see a bunch of stuff same thing we're going to facebook.com use quick if we're going to other sites if if i support http 2 we're going to communicate with http 2 and this all depends on the alpn uh if it's in case of http 1 http 2 and the tcp and the tls we tell the client the server that hey we if you support this protocol i do support them so pick the latest so the server will support whatever it picks so that's why the client actually can connect in hdb2 http 3 we cannot know that fact because guess what we we don't we cannot connect in a tcp and then ask the question in tls alp because quick uses udp right so we can't establish gcp and then s do you support http 3 and then only if they say yes we're going to have to close the connection and reconnect reconnecting udp that's just expensive right so quick has other methods of determining http 3 using alternative services whether in headers or the dns provide dns srv record all right guys that's it for me today um quick video describing the network fields let me know guys do you use the network tab in your diagnostics or not let me know in the comment section below i'm gonna see you in the next one what should i discuss next let me know in the comment section below i'm gonna see you in the next one you guys stay awesome goodbye

Channel: Hussein Nasser

Views: 105,384

Keywords: hussein nasser, backend engineering, network tab chrome, connection id, dev tools, browser dev tools, h3-29, h3-Q050, h2, http/1.1, h2 vs h1, frontend performance, web dev, web development, facebook quic

Id: LBgfSwX4GDI

Length: 20min 55sec (1255 seconds)

Published: Tue Nov 10 2020