Analyzing network usage

The Network panel allows you to determine the network efficiency of your content. The panel displays information about each HTTP request made as the browser engine requests and downloads resources.

The Network panel

You can click the Network icon in the toolbar to display the Network panel. Initially, the panel displays no information; you must reload the content on the device or simulator to allow Web Inspector to track the HTTP requests. When loading is complete, the Network panel displays a table similar to the following:

Screen showing the Network panel.

By default, the table lists each of the requested resources in the order in which they were requested, and charts the network activity as a waterfall timeline, with resources color-coded by type.

The waterfall timeline plots resources by the total time required to load the resource, from the initial request to the completion of the download. The pale segment of the resource bar in the chart represents the total latency, that is, the time the browser engine must wait from the moment it initially makes the request to the moment it receives the first packet of data for the resource. Two vertical lines on the chart provide mark key page load milestones:
  • The blue line indicates the time at which parsing of the content is complete and the DOMContent event fires.
  • The red line indicates the time at which all the resources have been loaded and the load event fires.

You can customize how the content is displayed in the Network panel; resources can be filtered based on type or sorted by any of the table headings, and the chart can be reformatted to highlight different time measures.

Apply a filter to display a specific resource type

By default, the Networks panel displays all resource requests in the table. The status bar at the bottom of the panel contains buttons that allow you to filter which resources are displayed based on the resource type.

  1. Click the Network icon on the toolbar to display the Network panel.
  2. If you have not already done so, on the device or simulator, reload the page to allow Web Inspector to track and record network activity.
  3. In the status bar at the bottom of the Network panel, choose the type of resource you want to display.

Change which time measure is displayed

By default, when you measure the network activity, Web Inspector charts the network activity in a waterfall timeline. You can reformat the chart to highlight different time measures.

  1. Click the Network icon on the toolbar to display the Network panel.
  2. If you have not already done so, on the device or simulator, reload the page to allow Web Inspector to track and record network activity.
  3. In the drop-down list above the chart, select one of the following load time measures:
    • Timeline: Displays the network activity in a waterfall timeline.
    • Start time: Highlights the time at which each resource was requested.
    • Response time: Highlights the time at which the resource is initially received.
    • End time: Highlights the time at which the resource is completely loaded.
    • Duration: Displays the total length of time it takes to load the resource.
    • Latency: Displays the amount of delay between the start time value and the response time value.

Reorder the list of resources

  1. Click the Networks icon on the toolbar to display the Networks panel.
  2. If you have not already done so, on the device or simulator, reload the page to allow Web Inspector to track and record network activity.
  3. Click a column heading to reorder the list based on the column data

Last modified: 2014-03-10

comments powered by Disqus