Ryan Boudreaux illustrates how you can use the Google Chrome Dev Tools Network Panel to gather information on web pages such as load times and resources used.
The Network Panel is part of the Google Chrome Developers tools, and it allows you to inspect resources as they are accessed over the network. The example demonstrated in this segment will inspect the U.S. edition of CNN.com.
Previous entries in the Google Chrome Developer Tools series include:
In Google Chrome, go to http://www.cnn.com
, then right-click anywhere on the browser and select Inspect Element; once the tool panel opens up, click to select Network, then press F5 on your keyboard to refresh the page. You will notice that the timeline will begin populating file names in a waterfall list of associated network activities, as shown in Figure A:
Latency, or the time between making the initial request and the server's first response is displayed on the timeline as the lighter shaded bar for each named file. Moving your cursor over a "bar" in the timeline will display a detailed balloon, as in the example shown in Figure B.
The file http://www.cnn.com displays the DNS Lookup at 42ms, Connecting at 67ms, Sending at 0, Waiting at 113ms, and Receiving at 232ms.
Click on images to enlarge.
The blue vertical line displayed in the waterfall timeline on the right panel represents the firing of the DOMContentLoaded
event, and the red vertical line represents the Load event. These two indicators are provided to help you determine the total time it takes for pages to load and gives you a benchmark from which to make improvements to your pages. The two events are displayed in Figure C
, and the screen capture is further down the named resources list.
On the bottom of the Network Panel are options to view the web page resources, including All, Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSocket, and Other. I've selected the Scripts resource in the example in Figure D
By default the display is sorted by Timeline; however, you can modify the sorting from a drop-down list which in addition to the Timeline also includes Start Time, Response Time, End Time, Duration, and Latency, as displayed in Figure E
Selecting the sort by Latency, I get the following view as displayed in Figure F
Another sort that you can run in either ascending or descending order is by the Size column, as you can see displayed in Figure G
, in descending order from the largest resources to the smallest.
Now, click on the http://www.cnn.com
resource entry from the left-side pane, and the display on the right-side pane will default to the Preview tab mode, which shows the HTML under the hood (See Figure K
). Other options include Headers, Response, Cookies, and Timing. The example shown below in Figure H
displays the Headers tab.
displays the Cookies tab:
displays the Timing tab:
The Network Panel Preview tab is similar in functionality and view to the Resources Panel's Resource view, as displayed in Figure K