Chrome Dev Tools Network Traffic

all right so today's episode we want to talk about Chrome Dev tools but specifically how to monitor Network traffic how to learn things about how your page is handling requests requests made from JavaScript requests made from dhtml by the browser so I've got a pretty simple web page here some HTML some CSS some JavaScript I'm bringing in a collection of things so I'm doing some fetch requests I'm bringing in some external CSS some CSS that's built in here so I've got my own CSS I'm also bringing in a CSS file from Google apis from Google fonts that's going to load a font so we've got all kinds of different requests just so we can take a look at this and here we go in my JavaScript file I'm making several fetch calls three of them for Json one using get when using post when using patch and then one I'm requesting an image from the pixum website so let's take a look at this my consoles log statements just to show that this thing is actually working it's making these requests but what I want to see here so toggling our Dev tools on and off be command option I keyboard shortcut or Ctrl shift I to bring up the dev tools we want to find the network tab now if this is smaller and you can't find it remember you've got these two arrows here the two Chev rods if you click on that we're looking for the network tab inside of here now lots of information available to us when I refresh this so I've got all the options and everything turned off inside of here so this is just the default settings inside of here this is a list of every request every HTTP request every websocket request that is being made from the browser to some server somewhere now everything always starts with the HTML file so that's what this one is this 127001 this is the home page for the origin that I'm on with Port 5500 so this is the live server that's set up in vs code that's loading my page you can see its type document and all these types match up with these settings that we have up here at the top so we can filter this list and say you know I only want to see the ones that were done with fetch or xmlhttp request so those Json and XML requests that we're sending from our JavaScript these basically are the things that the browser is not doing so it's not the browser reading our HTML and making requests saying oh you need a CSS file or you need an image this is my JavaScript making the requests so quick and easy way to filter out everything there because sometimes you've got pages that you're working on and there's dozens and dozens of CSS files and images and fonts and other things that just sort of cloud what you're looking at so we can filter it this way JavaScript well here's my JavaScript file and this is the one that is being put in here by this one's a Chrome extension I don't know if you can read that on the screen right there but Chrome extension colon slash slash so it's a script that's being injected we've got I think this is actually the Chrome Dev not the Chrome Dev tools the react Dev tools that is putting this one inside of your uh could be wrong on that CSS my CSS file and this is the one that is coming from Google so this is the Montserrat font that I'm using on my page we've got images now this may look like a strange one this is a data URL here so a data URL is a blob it's just the text Data that's being injected inside of here so this one's a blob this one's actually an address for the image being saved in memory on my computer my JavaScript is creating this URL and then I'm using that and I'm setting it as the source of this image there's other ones that start with data okay so data colon base64 and it's just a string of letters and numbers so it's a base64 encoded string that represents an image we have a checkbox here High data URLs so you can filter that if you've got a lot of images coming in that are blobs and data ones you can hide all those quite easily from this list and whether you're on the full list and you're hiding it or you're just inside of here you can hide those media we're talking about videos and audio things like that font we've got one font so in our main list here or here the CSS list this CSS file that we're requesting Google is sending us a CSS file in that CSS file is the request for the font here's the the actual font itself documents well those are web pages text files and so on so we've got here's our HTML file that's being loaded this is the thing that started it off websockets webassembly Json manifest files and something that's not inside of anything other PreFlight this has to do with Json requests so when we're making our fetch call to a server if we're making a course request so a cross-origin resource sharing request there's always this pre-flight request where the browser says okay JavaScript is asking for this file I'm going to because I'm not sure about this other server because I'm not sure if I'm allowed to do things with that I'm going to send an initial pre-flight request you can see Zero bytes there's nothing really coming being sent coming back there's very little going on so we're sending this request to the server to say am I allowed to do this and it's going to send back some headers that say yes or no you are or are not allowed and right here we can see Access Control allow origin right here so this is my origin and this is the most important thing for the browser so it's saying okay here's the origin of the web page that I'm displaying right now if the server in its response sends back to me this header Access Control allow origin and it is set to the same thing if it has this value then I'm going to allow this to proceed so I'm going to allow the fetch request to go ahead all right so with all of these things that we've been looking at all the different types in this big list we can click on any one of these I've done this a couple times already but if I click on one of these then we get to see the headers so all the headers the general headers that are always going to be there and then the response and request ones so the request these are the headers that the browser and JavaScript is putting together as the headers for the request that's going off to the server and then the response ones are the ones that are coming back from the server so you can look through this list to see exactly what's being sent most of these are things that the browser is doing and we're not even allowed to modify them like I can't change the host through JavaScript the browser is doing that so all these requests are here and the ones that come back from the server are here some of those are inside of here like status code that's coming back from the server the request method and URL coming from the browser the status code is coming from the response so all this information we also can see a preview so this is the CSS file that's being applied to here so that's the preview the response sometimes these are slightly different depending on the data type that you're dealing with the initiator so this tells you okay it was the web page that then requested this let's take a look at the other one here the there we go so request initiator chain the web page requested the CSS from Google fonts Google fonts this CSS file then requested the font so we can see the chain of that happening to see if there are more requests that are being initiated by what we brought back this kind of thing is one of those things that you should look for for performance in your web pages if you see that there's a really long chain of requests look for a way to shorten that so that there's only one step because every one of these requests in this chain means another delay and that brings us up here to the top in this we call this the sort of the waterfall up here we'll see these are the requests that are being made and they're not all being made at the same time it's okay we've got the web page that was being brought in we can actually click and drag I got the edge there but we can there we go I'll use my trackpad going up and down on my trackpad lets me zoom in and zoom out to a certain point in this timeline so I can zoom in zoom out I can click on a specific spot inside of here click over here you can see that yellow line as I move around and it's giving me that point in time from this gray bar to this gray bar this is what was happening these are the requests that were happening at that point in the timeline so I'm going to zoom out of here again to show the whole timeline we can see the entire time that it took to load everything and here's the other waterfall down here the side showing for each one of these files this is the sequence that the web page took to load these things so you're looking for problems with performance things that are slowing down your page this is a good place to look and you can see here if you Mouse over any one of those you get a breakdown of how much time was spent on each of these tasks waiting for Server response okay that was a big amount of time so 564 milliseconds so that's more than half a second spent waiting for a response from the server the actual download itself only a millisecond now that's on my connection now I've got a really good internet connection so it's not taking that long for things to happen that brings us up here to throttling if you have a good computer if it's running really fast you've got a good internet connection you might want to slow things down so here's a slow 3g connection I can hit refresh and we can see we can actually watch the things being loaded and see how much longer it took and so here's that image it still hasn't loaded there it is so we can see how much longer it took for each one of these things and if I go over that image here again there we go waiting for response two seconds the content download now took almost a half second with the throttling on so you can look for really long horizontal lines over here in the waterfall to find these are problem spots these are things to look at to find better ways of doing things on your page maybe you need to optimize your images maybe you need to change the sequence the order that you write things in your CSN and your HTML rather that can help determine the order that things are requested and the things are loaded onto your page disable cache is another one here so I'll turn my throttling off in my status bar here you can see 200 200 101 that's the web sockets that's the live server talking to me 200 bunch of 200s but I have some 304s here 304 means that it's coming from a cache and we can see here memory cache memory cache so the font and that CSS those have been cached by browser it's using that and 304 was the browser realizing it didn't have to make another request it's got its own cache for that now with these if we want to find out what the first load of a page is going to be like not okay the person's been using the page they visited it many times a lot of the stuff is in Cache what's the initial load going to be like so by disabling the cache here when I refresh we can see we've got here A whole bunch of two hundreds instead of that 304 cached now I still have one cash which is the redirect now the redirect was for this image in my script if we take a look at that you can see I'm making the request to pick some the actual image is coming from a different location and there's a redirect that happens so I'm making a request to hear it sends back a response to the browser saying 302 no this resource has been moved it's not going to be at this location you're actually going to get it from someplace else and that is this location so if I click on this one to open it up go to headers you can see pick some dot photos yep that's where it was 302 the 302 status that's the redirect and then if I look down here this one this is where the image is actually coming from so this one the actual downloading of the image was coming from here all right there's a few other settings if you open up inside of here you can change how things are grouped together depending on where they were requested grouping things together as opposed to just the sequence sequential loading now there's not much difference on this page there can be it sometimes if you're finding this difficult to work with if you're trying to read more information here you can use the large rows so it gives you the page name and where it was coming from so you get a lot more information inside of here it's a little bit easier to see in the initiator column it'll also tell you where things were being requested not just okay what kind of request was it but we can see where the request is being made from so we get more information for these things capturing screenshots there we go we can capture screenshots as it says here hit command R there we go and it's capturing these screenshots as it's loading the page so you get to see what these little uh slices of the loading process are so what do I use myself um I will toggle back and forth between the large request rows depending on what I'm trying to debug up here this is the most common tool for me to use I will jump in to see fetch requests I'll find out you know the order that things are happening and then if there's problems happening with these things I will go in click on one of them and look at the headers to figure out what was going wrong looking at the preview um these will give you a lot of information so filtering based on where the problem is happening if I'm not seeing my CSS I'll go into here to find out why if I'm not seeing the fonts I'll find out why or inside of here looking at the chain to see okay one of these things is being blocked the headers is going to give you a lot of information foreign you will want to preserve the log and that is this this is the log if I turn this on and I refresh the page we can see okay this is the first time it was loaded and then the second or sorry this is the first time it was loaded and here's the second time that it was loaded and every time we hit refresh we're getting more and more requests oh yeah okay it is scrolling up so we can see down here with disable cache turned off now I'm going to start to see the 304s these things so the cache responses so preserve log disable cache I have that turned on most of the time throttling I use on a regular basis there are a few other things that you can set um if you need to change the user agent or some of the other parameters we have that down here as well don't use that that often but throttling disable cache preserve log filtering by this list and then clicking on items to look at the headers those are the things that I use day in and day out as I'm testing things so I hope that helps you out hope that gives you a few more ideas of what you can do to monitor with the traffic that's coming from the browser and back to the browser and helps you in solving some of your problems all right so if you have any questions feel free to leave those in the comments and as always thanks for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 9,660

Keywords: MAD9013, MAD9014, MAD9022, web development, JavaScript, JS, CSS, HTML, steve flix, steveflix, web dev, professor Steve, prof3ssorSt3v3, 100daysofcode, chrome, dev tools, chrome developer tools, devtools, network tab, http requests, http responses, debugging fetch calls, fetch problems, cors issues, cors

Id: bQyXQDQFPag

Length: 17min 52sec (1072 seconds)

Published: Thu Apr 27 2023