Sorry about the red box, but we really need you to update your browser. Read this excellent article if you're wondering why we are no longer supporting this browser version. Go to Browse Happy for browser suggestions and how to update.

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:

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.

Click the Network icon on
the toolbar to display the Network panel.

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.

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.

Click the Network icon on the toolbar to
display the Network panel.

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.

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

Click the Networks icon
on the toolbar to display the Networks
panel.

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.

Click a column heading to reorder the list based on the column
data

Last modified: 2014-10-09

Got questions about leaving a comment? Get answers from our Disqus FAQ.