Developer tools in browser. Network tab

Network tab

Continuing the cycle of the articles about Developer Tools, today we will look through the Network tab. This tab is created to look through the process of downloading the page and all those files (names of files, responses (status) of the server). Also the type of the file, its initiator, size, download time can be seen too.

The top line is called TimeLine. It shows the chain of downloading the page files, as well as the download time of each element and general time in milliseconds.

Information about the process of the page downloading is displayed:

• amount of requests sent to the server;
• amount of the data sent;
• time that was spent to download all of HTML code;
• time spent to build the DOM tree of pages;
• time spent downloading all the necessary resources that affect the page display (such as media content, JavaScript files and everything that is placed on the page).

To look at the process and properties of the downloading process of the peculiar element, one needs to hover the mouse over the «Waterfall» tab, so the parameters needed will be seen:

• queueing –  request queue time;
• request sent – request sending time;
• waiting (TTFB) – time to first byte; 
• content download – content download time.

Also the information about the file can be found in the «Name» line after clicking it. The window opened afterwards will display the following properties:

• Headers – shows the settings of the headers, server response status, type of the request, file, method, IP address. 
• Preview – shows the file preview.
• Response – shows the additional responses of the server if there are some.
• Initiator – shows what has requested the resource (the exact code line).
• Timing – shows a detailed timeline of the page download.
• Cookies – shows the properties of cookies (key and meanings).

In order to find the Headers tab useful, it is advised to know the server response codes. They are divided into 5 main classes:

• 1хх – informational codes (time code that informs that the request has been accepted by the server and it will be processed).
• 2хх – successful processing (the request has been accepted and processed successfully by the server).
• 3хх – redirect (it means that to perform the request one more request  to a certain address must take place). 
• 4хх – the error is on the customers’ side, the server cannot perform the request.
• 5хх – server error (the customer sends the specific request, but due to the internal mistake in the server, it cannot be processed).

The following tools are also displayed in the Network tab:

1. The «Stop recording network log» button. By default, the button is active.

      2. Next to the «Stop recording network log» button, the «Clear» button is located. It is created to clean the logs. After refreshing the page, the logs will be displayed again. 

      3. In the settings block, there is the «Capture Screenshots» page. It allows you to take a screenshot of each stage of the page download.

The «Filter» button shows and hides the filter bar. 

The «Search» button opens a search window for all the elements of the page. 

The «Preserve Log» option identifies whether the logs must be saved or not. If the checkbox is not chosen, the data will be deleted after refreshing the page and will be downloaded again. If the checkbox is on, the previous logs are going to be saved after refreshing or following the new page.

The «Disable cache» option identifies whether the browser cache can be used 

The «Online» dropdown list allows you to choose and emulate the type of the Internet connection: online, offline, fast 3G, slow 3G, or to add your own type.

It is recommended that all testers who want to improve their technical skills learn and try out the developer's tools as much as possible. The types of testing that can be performed with them significantly expand the capabilities of the QA engineer and improve the quality of testing.