UI of Network Tool

The UI of the Network Tool can be divided in three section which are options, timeline and network log section. Lets move from top down and understand each section.

Options section

There are many filtering and network related option provided by the tool. Let’s move left to right and understand each of them.

• Record Network Log: To start recording the network activity click this button after it starts the button turn red indicating that you can click it to stop. Alternatively use “Ctrl+E” to start/stop the recording.
• Clear Network Log: Removes all the logs present in the below section.
• Filter: On clicking this button a pane appears. You can filter logs by typing text or regular expressions in the filter input. You can also select the specific file types to filter. The pane also provides checkboxed to invert the filtering, hide data URLs, hide extension URLs, display blocked requests, response cookies and display 3rd-party requests.
• Search: You can search the files using some text or regular expression.
• Preserve log: If checked then every time you refresh the page or navigate around the page the logs will remain.
• Disable cache: If checked then while the DevTools is open the browser will not use cache so you can check all possible network activity.
• Throttling: Used to simulate the various network speed such as Fast 3G, slow 3G or offline. You can also add custom profile.
• More network conditions: Provides a drawer tab to change caching, network throttling, user agent, accepted content-encodings.
• Import: You can use this button to import a HAR file containing network information to preview it in the network tool.
• Export: You can use this button to export the network information recorded by the tool for that web page in HAR file format.
• Settings: You can customize the network tool using this setting button. The setting pane provides check boxes for big request rows, group by frame, include pending request in HAR file, overview section and screenshots section.

Timeline section

The timeline section provides visual bars representing the request and response time. You can also focus on specific range in the timeline to check the request on specific time period.

Selecting a range in the Timeline

• To select a range in the timeline section bring you mouse to the starting point and then drag upto the area which you want to focus on.
• To resize it drag the white rectangle in the range.
• To get out of the range selection double click in the timeline section.

Network Log section

There are various information provided in the logs such as status, file type and size. The log also provide the waterfall graph to view it and get information about the durations.

Add columns in the log

You can add more columns to provide additional information about a particular resources. Just right-click in any column and select the column you want and if you want response headers then select in it from the Response headers sub-menu.

Display resources details

Click on the name of the resources to get various information about the HTTP header, contents, initiator and timing.

The Network Tool is used to view the various network request and corresponding responses of the web page. It provides various types of information about the request such as hearde, payload and initiator. You are also allowed to set various network conditions or filter in the requests or set network throttling.