Using Chrome DevTools Network Tab for Inspecting network activity

hi old today let's take a deep dive into the network tab of the Chrome browser which can be used for analyzing the different resources which our web page actually uses so in today's example we will be taking a look at the Amazon website so first in order to open the Chrome developer tools we can go to the more tools and click on developer tools so we have multiple tabs here so let's focus today on the network tab so the network tag basically lists all the resources which are currently required for this particular website to function you can see that the network tab consists of only the resources which have been requested after the dev tools have been opened so all the previously requested resources will not be listed here in the network tab so in order to see all the resources needed by the website let us refresh the application so once we refresh our application you can see that a lot of resources are needed for properly displaying our Amazon website so now let us try out the different options which are available within the network Tab and see their functionalities so first we have this button called the stop recording Network log so once you click on it what happens is whenever we refresh our application you can see that none of the requests are being recorded here within our Network tab so the second option is the clear option so once you click on clear all the entries are cleared from the network tab so since our recording is not enabled once you refresh you can see that no new entries are created so you can turn it on by clicking again and now all the resources will be listed so after that we have the filter option which will take a look in a later stage similarly we have the search which also we will see in a later stage let us next move on to The Preserve log so preserve log option once you check what happens is that these resources will be stored across multiple sessions so what happens is that even when we refresh our application you can see that all the previous logs are also maintained within the network tab but in case we uncheck it once you refresh the network tab will be cleared and it will list only the resources needed for the current session of the website so when we take a look at the network tab the most important part of the network tab is the place where the resources are listed so it consists of a header where we have the different columns like the name of the resource the status code of the resource like when that particular resources was requested what was the status that is returned from the server similarly the protocol which is used for serving the resource and there are different columns so in case you need to add more columns what you can do is you can right click on the header there you can see all the options which are available that can be added to this particular table once the resources are listed here you can basically sort these resources based on a particular column so by default you can see that this entries are sorted by the waterfall so it basically means the timeline in which these resources have been requested so the first requested resource will be on the top and the last will be at the bottom so we can change the Sorting order by clicking on any particular column so I am going to click on the name so now the entries are supported on the basis of name so this can be ascending or descending similarly we have the protocol if you want to sort based on the size you can click here similarly for sorting our resources other than clicking on the header there is another way by right clicking on a particular header and you have the sort by option where you can select the column based on which you need to sort the data similarly you have the waterfall column where there are different subcategories based on which you can sort the column that is the waterfall column so initiate by default it will be sorted based on the start time of the request but you can change it to the response time or the end time of the request that is the request which first accomplished that will be listed on top or you can sort based on the total duration of the request and also the latency so let us select the default that is start time within the table if you want to inspect a particular entry what you can do is you can click on that particular entry a window is opened which has multiple tabs these are the headers preview response initiator timing and the cookies so the header tab basically consists of the information of the various headers which are associated with this particular resource request so this consists of the request URL the HTTP method which was used for accessing this resource the status code and the remote address and other details similarly we have two other sections one is the response header and the request header so the request header will be the headers which are set when this particular request for the resource was made from this browser you can see all the different headers so some common examples are the encoding which are accepted like GC broadly Etc the cache control headers and the response header section will have the headers which are coming from the server along with the response of the results so here you can see the content encoding which basically means that the content is gcip and sent from the server so the second tab which we have is the preview tab where you can see a preview of the resource which are sent from the server so the actual resource will be the response so since initially we have asking for an HTML the response will have the HTML page and in the preview we can see the HTML getting rendered so similarly if we have an image the image will be rendered here in the preview tab the next tab is the initiator tab which basically contains the code chain or the sequence in which the different resources have been requested from the page so the same thing you will be able to see from the table itself we have a column called initiator so in case you hover on top of any of this you can see the stack price showing the place from which this particular resource was requested so once you click on that it will be redirected to that particular Source next we have a tab called timing which basically shows the amount of time which was needed for this particular resource request to complete so we have different stages which are the queuing stalled then the request sent to the server waiting for the server response and finally the content download so you will be able to see the different breakdown for all the faces and finally the total time that was taken for getting this particular source and finally we have the tab called cookies where we will be able to see all the cookie values the key value pairs which are available for this particular request and for this domain so one more way in which you will be able to see the dependencies and the initiators is by making use of the keyboard you can press on the shift key and when you hover on a particular resource you can see all the red entries so the entries which are highlighted in red are the children resources which are requested by the currently forward entry so the amazon.in that is an HTML page so it is requesting all the the sources which are highlighted in the red similarly if we hover on the particular red entries you can see that the amazon.in is getting highlighted in green color which basically means that it is the parent for that particular resource when we come to this entry you can see that amazon.in is in green and we have another counter which is an Ajax code that is in red which is basically meaning a child dependency of this particular entry so one thing you would have noted is that we have a panel here which shows the timeline of the our website so here we will be able to see the overview of all the resources that has been requested by the website so this panel is called the overview panel so if we refresh the page we can see the overview showing all the resources that are being requested so there is an option to hide this plane in case you need not want to see this you can click on the editor settings that is this icon we have the option called show over you in case you uncheck that the overview won't be shown so I am turning it on back again now the entries which we see here there is an option to increase the data which is shown in this particular entry so we have the use large request Pros so once you click on that you can see that each entry is showing a bit more data like the size of the request so the size which is shown on the top is actually the compressed size that is transferred over the network and the size which is shown below is the uncompressed size which is the actual size of the results now similarly we have the timings for this particular data to get transferred over the network these things we can enable by making use of the use large request rows then we have another option within the network setting that is a group by frame so basically what it does is suppose our website consists of multiple iframes embedded within the page all the requests which are coming from a particular frame that is you can see here like the Chrome web data that's that is a iframe listed within the web page all the resources that are requested by that iframe it will be grouped within that particular entry so in case you do not want this you can uncheck the group by frame and similarly we have one more option called the capture screenshots so once you enable that when we refresh our page you can see that the frames for each of the timeline of our application is captured so you can just click on the entry and you will be able to see a snapshot of our website at that particular moment of time so I am disabling it so you would have seen that there are a lot of entries within our Network tab so it would be nice if we can filter this entries based on certain conditions so for this purpose we have the filter icon here so once you click on the filter different options are being shown here using which we will be able to filter our entries so first we have the search that is the filter search where we can either give a normal text so in this case I am going to enter woof so all the entries which consist of that particular text it will be filtered similarly we have other options based on which we will be able to filter so one option is the priority so once you select that you can see the different options for which are available for priority so in case I click on the highest all the requests with the highest priority these are filtered similarly we have different useful options like the domain So based on the different domains from which the resources are downloaded we will be able to filter them using the domain query other option like hash response header so in case you need to search a particular entries which have this particular response header you will be able to filter this entries so if you click on control and space all the different options will be listed so we have the larger than so in case you need to find out which are the entries or the resources which have size greater than a particular range you will be able to make use of the larger than so let's try that you can see the larger than 10K if you select on that you can see that there is only a one entry similarly we can filter based on the method so you can either give so all the get request will be displayed here so these are all the different options which are available for filtering and the second checkbox that is the inward so what it does is suppose we filter a particular entry like wolf I am filtering and I am selecting the invert what happens is it just inverts the selected result that is except the matching entries with wolf all the other entries will be displayed so it's basically like a negative search similarly we have second option called high data urls so all this data URLs which we see here once you click on the hide that URLs those won't be available within the entries once we do a filtering like we will be able to see the number of requests which are shown in this particular Network tab in the lowermost pane here you can see the number of requests which are totally available along with the total size which is available and this is the transport size that is the compressed one and this is the actual size of the resource now we have another option to basically filter based on the file type so it can be so it can have Js CSS images so once you click on that only that particular type of files will be listed the media file font doc websocket was awesome that's webassembly any manifest file or any other files which are not belonging to these categories and finally we have the port we will be able to select multiple entries as well from within this filter you can just press on Ctrl and click on the Android now both the JavaScript and the CSS files will be listed here similarly we can also filter this request based on the timeline in the overview so here you can reduce the width of this timeline and you can see that the entries within the Network tab it will also be reduced so these are the different options for filtering the request and other things have like any blocked cookies are there those request will be filtered any blocked request that you will see and also we have we can identify any third party requests which are available we can just display that along within the network tab a third party basically means any resource which is requested from other than our own domain for certain type of request like the Etc let's say it's XML HTTP request or fetch you will be able to see some additional information when we click on the particular entry so previously we had seen the headers tab so we have the header details similarly we have another tab called the payload which basically contains all the query string parameters in case of a get method or any data which is being sent through the body for a request other than the get so here you can see the correcting parameters you can either see the parts format that is this one or you can actually view the source itself which is the actual query string you can see within the URL and also we have the URL encoded view so these are the options which are available within our payload tab similarly the response you will be able to see the response in this case it's a Json so this will actually contain the raw data and the preview will have the formatted data so there are different options which are available by right clicking on this particular value you can either copy the value or in case there are any nested values you can expand this recursively option and also we can collapse the children in case you do not want to see all the nested values there is also an option to actually search or any particular value within this network tab so let's search for content security so once you enter the value and hit enter you will be able to see all the requests which have this particular string so here we have the content security policy so you can click on that particular entry and you will be able to navigate to any tab within this request so you have different options to match case give regular expression to refresh the result and to clear the result in case of xhr or fetch there is an option to actually Replay that particular request so you can right click on any particular shr request and there is an option called replay xhr so once you click on that that particular action will be executed one more time so here you can see that the feedback link that is the request we gave that is being executed one more time here within our timeline so now let's explore the remaining few options which are available so one option is the disabled cache so this option basically helps us to emulate the first time visit of a user to our web page so we can do one thing we can enable the disabled cache and refresh our application so now you can see that actually all this request that is the resources these are getting requested from the actual Network so you can see the time that is taken by the request it is actually increased and these are actually going over the network to fetch this resources this will give a Accurate Way of how the user will be able to see our application initially so once we we sit there the second time onwards what happens is that all these resources most of these resources will be cached and the they'll be fetched from within the cache either the memory cache or the this cache the other request like xhr all this will be actually going over the network another option is how we can emulate the different network speeds within our application so even we can emulate the offline mode so it basically acts like we do not have any Net Connection so when we try to refresh the page you can see that there is no internet but in case of applications which are progressive web apps you will be able to test them by making use of the offline mode so you can also throttle till the speed of our Network so you can either select the different options which are available already that's pretty defined so let's try the fast 3G now you can see that our application it's a bit slow similarly we can try the slow 3G as well and another option is that we will be able to Define our own custom Network throttling settings so for that we can select the custom and click on ADD you can add a custom profile you can give any name and you can Define the download speed limit and the upload speed limit so and giving it as 1024 and you can also provide the latency so I am giving it as five millisecond so once we add this particular profile you can select that from within the custom throttling and use that for testing similarly we have expanded view with more Network conditions so here again we will be able to select the option to disable the cache the network thought link even we can change the default browser which we are using so we can change this and the different types of browser user agents are available here you can select one of these and you can test the website using that particular user agent and also we have the different compression that is encoding types which we can select so by default all these are supported in case you do not want to support any of this you can uncheck this let us see some other ways in which we will be able to manually clear the cache or the cookies of our website so one way is that once we have opened the network tab or the developer tools will be able to right click on the refresh button and here we have an option called empty cache and hard reload which basically clears all the cache the same thing we will be able to achieve by right clicking on any particular entry here and we have the option to clear browser cache also we will be able to clear browser cookies from this option so if you click on that you'll ask to whether we can clear the browser cookies now there is another useful way in which we will be able to block any particular request so that in case we need to test for the failure scenario of any particular resource you can do that so what I am going to do is I am going to fail this particular request so for that what you can do right click on that particular entry and there is an option called block request URL so you can click on that so it opens another tab which shows the network request blocking so it basically shows the particular entry is being listed here you will be able to like edit this entry and in case you need to block all the URLs which match this particular entry you can just save it here and once you refresh the application you can see that that particular entry has been blocked by the metro tab so you will be able to test any scenarios in which we can emulate the failure of a particular entry similarly we have we can block any particular request domain as well so once we enable this request blocking this particular icon will be shown on the network tab which means that some kind of network blocking is happening so we can also remove the Network blocking you can also clear all the entries now another feature which is available Within the footer of the network tab is that we can see the actual load timings for our website that is the Dom content loaded time as well as the load time for our website another useful option is that we can copy any of this request by right clicking on this particular entry and we have the option to copy you can copy the link address the response the stack place all those things and even we can copy this particular entry as a particular kind of format like you can give the fetch so what happens is that when you paste it you can see that that particular entry has been copied over as a fetch command and finally we have the very useful option to actually download this particular activities that is all this entries we can export it as a file so that is called a half that is HTTP archive so you can click on this particular icon here it will ask for where we need to save this particular R file so let us select this particular folder and click on Save now if we go to that folder you can see the har file and if you open this there will be lot of data so it is very quite difficult to analyze that so suppose we have an already exported half file within our system we can easily import it to our page so in case I am inside google.com even there if I open the network Tab and just import the heart so let us import the r from previously downloaded Amazon R5 so once I click on that you can see that all the requests which are actually used by Amazon I will be able to see within this newly opened Network tab which actually belongs to Google so you will be able to analyze and previously existing R file and in case you need to debug and find any errors you'll be able to do so so hope you are able to get a good understanding about what are the different ways in which we can analyze the resources which are used by a particular website by making use of the networks tab in Chrome see you soon thank you

Channel: JS Frameworks

Views: 4,509

Keywords: chrome, chrome devtools, chrome developer tools, google chrome, chrome network settings, network throttling chrome, request blocking, web development

Id: hPB-Sgy1uoM

Length: 30min 23sec (1823 seconds)

Published: Sun Dec 18 2022