Kayce Basques

This is a hands-on tutorial of some of the most commonly-used DevTools features related toinspecting a page's network activity.

SeeNetwork Reference if you'd like to browse features instead.

Read on, or watch the video version of this tutorial:

When to use the Network panel

In general, use theNetwork panel when you need to make sure that resources are being downloaded oruploaded as expected. The most common use cases for theNetwork 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, andso on.

If you're looking for ways to improve page load performance,don't start with theNetwork panel.There are many types of load performance issues that aren't related to network activity. Start withthe Lighthouse panel because it gives you targeted suggestions on how to improve your page. SeeOptimize 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.

1. Open theGet Started Demo.

   

   You might prefer to move the demo to a separate window.

   

2. Open DevTools by pressing Control+Shift+J or Command+Option+J (Mac). TheConsole panelopens.

   

   You might prefer todock DevTools to the bottom of your window.

   

3. Click theNetwork tab. TheNetwork panel opens.

   

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

Log network activity

To view the network activity that a page causes:

1. Reload the page. TheNetwork panel logs all network activity in theNetwork Log.

   

   Each row of theNetwork Log represents a resource. By default the resources are listedchronologically. The top resource is usually the main HTML document. The bottom resource iswhatever was requested last.

   Each column represents information about a resource. The default columns are:

   • Status: The HTTP response code.
   • Type: The resource type.
   • Initiator: What caused a resource to be requested. Clicking a link in the Initiator columntakes you to the source code that caused the request.
   • Size: Resource amount transferred over the network.
   • Time: How long the request took.
   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. SeeHide the Overview track.

2. So long as you've got DevTools open, it will record network activity in theNetwork Log. Todemonstrate this, first look at the bottom of theNetwork Log and take note of thelast activity.

3. Now, click theGet Data button in the demo.

4. Look at the bottom of theNetwork Log again. There's a new resource calledgetstarted.json. Clicking theGet Data button caused the page to request this file.

   

Show more information

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

1. Right-click the header of theNetwork Log table and selectDomain. The domain of eachresource is now shown.

   

1. Click theThrottling drop-down, which is set toNo throttling by default.

   

2. Select3G.

   

3. Long-pressReloadrefresh and then selectEmpty Cache And Hard Reload.

   

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

   Note: TheEmpty Cache And Hard Reload workflow is only available when DevTools is open.

Capture screenshots

Screenshots capture how your page looks at different times while it loads, and reports what resources are loaded at each interval.

To capture screenshots, follow these steps:

1. ClickNetwork Settingssettings.

2. Enable theScreenshotscheck_box checkbox.

3. Reload the page again using theEmpty Cache And Hard Reload workflow. SeeSimulate a slowerconnection if you need a reminder on how to do this. TheScreenshots tab providesthumbnails of how the page looked at various points during the loading process.

   

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

   

5. Toggle theScreenshots checkbox to close the Screenshots tab.

6. Reload the page again.

Inspect a resource's details

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

1. Clickgetstarted.html. TheHeaders tab is shown. Use this tab to inspect HTTP headers.

   

2. Click thePreview tab to view a basic HTML rendering.

   

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

3. Click theResponse tab to view the HTML source code.

   

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

4. Click theInitiator tab to view a tree that maps the request initiator chain.

   

5. Click theTiming tab to view a breakdown of the network activity for this resource.

   

6. ClickCloseclose to view theNetwork Log again.

   

Search network headers and responses

Use theSearch tab when you need to search the HTTP headers and responses of all resources fora certain string or regular expression.

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

1. ClickSearchsearch. TheSearch tab opens to the left of theNetwork log.

   

2. TypeCache-Control and press Enter. TheSearch tab lists all instances ofCache-Controlthat it finds in resource headers or content.

   

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

   

4. Close theSearch tab and theHeaders tab.

   

Filter resources

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

TheFilters toolbar should be enabled by default. If not:

1. ClickFilterfilter_alt to show it.

Filter by string, regular expression, or property

TheFilter input box supports many different types of filtering.

1. Typepng into theFilter input box. Only the files that contain the textpng are shown.In this case the only files that match the filter are the PNG images.

   

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

   

3. Type-main.css. DevTools filters outmain.css. If any other file matched the pattern theywould also be filtered out.

   

4. Typedomain:raw.githubusercontent.com into theFilter text box. DevTools filters out anyresource with a URL that does not match this domain.

   

   SeeFilter requests by properties for the full list of filterable properties.

5. Clear theFilter input box of any text.

Filter by resource type

To focus in on a certain type of file, such as stylesheets:

1. ClickCSS. All other file types are filtered out.

   

2. To also see scripts, hold Control or Command (Mac) and then clickJS.

   

3. ClickAll to remove the filters and see all resources again.

SeeFilter requests for other filtering workflows.

Block requests

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

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

   

2. Typeblock, selectShow Request Blocking, and press Enter.

   

3. Click theAdd Pattern button.

4. Typemain.css.

   

5. ClickAdd.

6. Reload the page. As expected, the page's styling is slightly messed up because its mainstyle sheet has been blocked. Note themain.css row in the Network Log. The red text means thatthe resource is blocked.

   

7. Clear theEnable request blocking checkbox.

To discover more DevTools features related to inspecting network activity, check out theNetwork Reference.