When to use the Network panel

In general, use the Network panel when you need to make sure that resources are being
downloaded or uploaded as expected. The most common use cases for the Network panel are:

Making sure that resources are actually being uploaded or downloaded at all.

Inspecting the properties of an individual resource, such as its HTTP headers, content,
size, and so on.

If you're looking for ways to improve page load performance, don't start with the Network
panel. There are many types of load performance issues that aren't related to network
activity. Start with the Audits panel because it gives you targeted suggestions on how to
improve your page. See Optimize Website Speed.

Open the Network panel

To get the most out of this tutorial, open up the demo and try out the features on the
demo page.

Right now the Network panel is empty. That's because DevTools only logs network activity
while it's open and no network activity has occurred since you opened DevTools.

Log network activity

To view the network activity that a page causes:

Reload the page. The Network panel logs all network activity in the Network Log.

Figure 6. The Network Log

Each row of the Network Log represents a resource. By default the resources are
listed chronologically. The top resource is usually the
main HTML document. The bottom resource is whatever was requested last.

Each column represents information about a resource. Figure 6 shows the default
columns:

Status. The HTTP response code.

Type. The resource type.

Initiator. What caused a resource to be requested. Clicking a link in the Initiator
column takes you to the source code that caused the request.

Time. How long the request took.

Waterfall. A graphical representation of the different stages of the request.
Hover over a Waterfall to see a breakdown.

Note The graph above the Network Log is called the Overview. You won't
be using it in this tutorial, so you can hide it if you prefer. See Hide
the Overview pane.

So long as you've got DevTools open, it will record network activity in the Network Log.
To demonstrate this, first look at the bottom of the Network Log and make a mental
note of the last activity.

Now, click the Get Data button in the demo.

Look at the bottom of the Network Log again. There's a new resource called
getstarted.json. Clicking the Get Data button caused the page to request this file.

Figure 7. A new resource in the Network Log

Show more information

The columns of the Network Log are configurable. You can hide columns that you're not using.
There are also many columns that are hidden by default which you may find useful.

Right-click the header of the Network Log table and select Domain. The domain of
each resource is now shown.

Figure 8. Enabling the Domain column

Tip You can see the full URL of a resource by hovering over its cell in the
Name column.

Simulate a slower network connection

The network connection of the computer that you use to build sites is probably
faster than the network connections of the mobile devices of your users. By throttling
the page you can get a better idea of how long a page takes to load on a mobile device.

Click the Throttling dropdown, which is set to Online by default.

Figure 9. Enabling throttling

Select Slow 3G.

Figure 10. Selecting Slow 3G

Long-press Reload
and then select Empty Cache And Hard Reload.

Figure 11. Empty Cache And Hard Reload

On repeat visits, the browser usually serves some files from its cache,
which speeds up the page load. Empty Cache And Hard Reload forces the browser to go
the network for all resources. This is helpful when you want to see how a first-time
visitor experiences a page load.

Note The Empty Cache And Hard Reload workflow is only available when
DevTools is open.

Capture screenshots

Screenshots let you see how a page looked over time while it was loading.

Click Capture Screenshots.

Reload the page again via the Empty Cache And Hard Reload workflow. See
Simulate a slower connection if you need a reminder on how to do this.
The Screenshots pane provides thumbnails of how the page looked at various points during the
loading process.

Figure 12. Screenshots of the page load

Click the first thumbnail. DevTools shows you what network activity was occurring at that
moment in time.

Figure 13. The network activity that was happening during the first screenshot

Click Capture Screenshots again
to close the Screenshots pane.

Reload the page again.

Inspect a resource's details

Click a resource to learn more information about it. Try it now:

Click getstarted.html. The Headers tab is shown. Use this tab to inspect
HTTP headers.

Figure 14. The Headers tab

Click the Preview tab. A basic rendering of the HTML is shown.

Figure 15. The Preview tab

This tab is helpful when an API returns an error code in HTML and it's easier to read
the rendered HTML than the HTML source code, or when inspecting images.

Click the Response tab. The HTML source code is shown.

Figure 16. The Response tab

Tip When a file is minified, clicking the Format button at the bottom of the
Response tab re-formats the file's contents for readability.

Click the Timing tab. A breakdown of the network activity for this resource is shown.

Figure 17. The Timing tab

Click Close to view the Network Log again.

Figure 18. The Close button

Search network headers and responses

Use the Search pane when you need to search the HTTP headers and responses of all resources
for a certain string or regular expression.

For example, suppose you want to check if your resources are using reasonable cache
policies.

Click Search. The Search pane opens to the left
of the Network log.

Figure 19. The Search pane

Type Cache-Control and press Enter. The Search pane lists all instances of
Cache-Control that it finds in resource headers or content.

Figure 20. Search results for Cache-Control

Click a result to view it. If the query was found in a header, the Headers tab opens.
If the query was found in content, the Response tab opens.

Figure 21. A search result highlighted in the Headers tab

Close the Search pane and the Timing tab.

Figure 22. The Close buttons

Filter resources

DevTools provides numerous workflows for filtering out resources that aren't relevant to the
task at hand.

Figure 23. The Filters toolbar

The Filters toolbar should be enabled by default. If not:

Click Filter to show it.

Filter by string, regular expression, or property

The Filter text box supports many different types of filtering.

Type png into the Filter text box. Only the files that contain the text png are
shown. In this case the only files that match the filter are the PNG images.

Figure 24. A string filter

Type /.*\.[cj]s+$/. DevTools filters out any resource with a filename that doesn't
end with a j or a c followed by 1 or more s characters.

Figure 25. A regular expression filter

Type -main.css. DevTools filters out main.css. If any other file matched the pattern
they would also be filtered out.

Figure 26. A negative filter

Type domain:raw.githubusercontent.com into the Filter text box. DevTools filters
out any resource with a URL that does not match this domain.

Block requests

How does a page look and behave when some of its resources aren't
available? Does it fail completely, or is it still somewhat functional? Block requests
to find out:

Press Control+Shift+P or
Command+Shift+P (Mac) to open the Command Menu.

Figure 30. The Command Menu

Type block, select Show Request Blocking, and press Enter.

Figure 31. Show Request Blocking

Click Add Pattern.

Type main.css.

Figure 32. Blocking main.css

Click Add.

Reload the page. As expected, the page's styling is slightly messed up because its main
stylesheet has been blocked. Note the main.css row in the Network Log. The red
text means that the resource was blocked.

Figure 33. main.css has been blocked

Uncheck the Enable request blocking checkbox.

Next steps

Congratulations, you have completed the tutorial. Click Dispense Award to receive your
award.

Check out the Network Reference
to discover more DevTools features related to inspecting network activity.

Feedback

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had the information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had accurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was easy to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

No

What was the worst thing about this page?

It didn't help me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was missing information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had inaccurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was hard to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.