.svg)
Chrome Developer Tools (DevTools) is perhaps one of the most useful tools you’ll come across as a web developer. These tools allow developers to analyze, test, and debug software. In this article, we’ll be mainly focusing on the Network tab in DevTools.
This tool is used to check whether the resources and scripts used in the development of the page are being downloaded and uploaded as expected. Everything, from the page and script load times, status, and even their properties can be monitored, tested, and managed.
In this walkthrough of DevTools - Inspect network activity, we’ll take a look at a simple website for gaining an understanding of the tool and getting familiar with it. So, in a new window opened side by side, go to https://example.org and open DevTools by pressing control+shift+j. Next, navigate to the network tab button and click on it.
Initially, the log will be empty as it doesn’t record any network activity before being opened. Now, reload the page and you should see a script called example.org.
At the bottom of the DevTools Network panel, you’ll see the number of requests made by the page (i.e. number of requests to load the scripts, API calls, style sheets, multimedia files, etc.), amount of data transferred over the network for loading the page, size of resources loaded onto the webpage and time taken to load the scripts and page.
When you click on the example.org script, you should see a new panel pop up on the side with several other panels listing the properties associated with the script.
First, comes the Headers panel. This shows the headers that the server is requesting to load the webpage. This is used to carry information about the request itself, for communication between the client and server. The Preview panel shows the content that was loaded by the selected script and the Response panel displays the code used to create the script. The Timing panel gives a detailed description of the request’s arrival and load times.
A simplified and illustrative view of the Timing panel is present in the Network log section which goes by the name of Waterfall. This tool is used to get an overview of the arrival timings of the several requests that a webpage makes and to optimize the page accordingly.
The Status panel shows the status of the request by representing it with a unique code. The Initiator panel shows how the script was initiated. There are different initiators possible for a request. Some of the possible values that could be displayed here are:
- Parser: This shows up when Chrome’s HTML parser initiates the request.
- Redirect: This is displayed when an HTTP redirect initiates the request.
- Script: The script’s name is displayed when a script initiated the request.
- Other: This means that the script was initiated by the user navigating to the page or by typing in the URL into the search bar.
There are a bunch of other useful columns that can be configured to display in the Network tab by default. All you have to do is right-click on any of the column headers and select/deselect whatever you want to show up as the column.
Just over this information, you’ll see the different file types that are present as default filters for sorting the scripts. You can click on any of those to filter out the specific files for monitoring them. You can also manually search for different requests by typing in the filter search field.
At the top left, you’ll see a bright red button. This means that the network is currently being recorded and any incoming or outgoing requests on that particular page will be recorded and show up on the network log. If you want to stop logging the network activity, click on the button and all network activity will stop being recorded. You can also reset the entire network panel by clicking the Clear button next to it.
You can also emulate alternative network conditions on your webpage by changing the network connection. You can test it out on the different connection options like “Fast 3G”, “Slow 3G”, etc. This will allow you to better analyze the page as it would load on a mobile connection rather than the standard PC connection, which generally tends to perform a lot better.
There, I hope you now have a better understanding of the Network tab in DevTools. Start fiddling around with it and set up the perfect development environment for you.
.svg){kind=icon}
