Discover new ways to analyze how your page loads in this comprehensive reference of Chrome DevToolsnetwork analysis features.

Record network requests

By default, DevTools records all network requests in theNetwork panel, so long as DevTools is open.

Stop recording network requests

To stop recording requests:

• ClickStop recording network logon theNetwork panel. It turns grey to indicate that DevTools is no longer recording requests.
• PressCommand> +E (Mac) orControl +E (Windows, Linux) while theNetwork panel is in focus.

Clear requests

ClickClearon theNetwork panel to clear all requests from theRequests table.

Save requests across page loads

To save requests across page loads, check thePreserve log checkbox on theNetwork panel.DevTools saves all requests until you disablePreserve log.

Capture screenshots during page load

Capture screenshots to analyze what users see as they wait for your page to load.

To enable screenshots, openSettings inside theNetwork panel and checkCapture screenshots.

Reload the page while theNetwork panel is in focus to capture screenshots.

Once captured, you can interact with screenshots in the following ways:

• Hover over a screenshot to view the point at which that screenshot was captured. A yellow lineappears on theOverview timeline.
• Click a screenshot's thumbnail to filter out any requests that occurred after the screenshot wascaptured.
• Double-click a thumbnail to zoom in on it.

Replay XHR request

To replay an XHR request, do one of the following in theRequests table:

• Select the request and pressR.
• Right-click the request and selectReplay XHR.

Change loading behavior

Emulate a first-time visitor by disabling the browser cache

To emulate how a first-time user experiences your site, check theDisable cache checkbox.DevTools disables the browser cache. This more accurately emulates a first-time user's experience,because requests are served from the browser cache on repeat visits.

Disable the browser cache from the Network conditions drawer

If you want to disable the cache while working in other DevTools panels, use theNetwork conditionsdrawer.

1. Click the icon to open theNetwork Conditions drawer.
2. Check or clear theDisable cache checkbox.

Manually clear the browser cache

To manually clear the browser cache at any time, right-click anywhere in theRequests table andselectClear browser cache.

Emulate offline

There's a new class of web apps, calledProgressive Web Apps, which can function offline withthe help ofservice workers. When you're building this type of app, it's useful to be able toquickly simulate a device that has no data connection.

To simulate a completely offline network experience, selectOffline from theNetwork throttling drop-down menu next to theDisable cache checkbox.

DevTools displays a warning icon next to theNetwork tab to remind you that offline is enabled.

Emulate slow network connections

To emulate fast 4G, slow 4G, or 3G, select the corresponding preset from theThrottling drop-down menu in the action bar at the top.

DevTools displays awarning warning icon next to theNetwork panel to remind you that throttling is enabled.

Create custom throttling profiles

In addition to presets, such as slow or fast 4G, you can also add your owncustom throttling profiles:

1. Open theThrottling menu and selectCustom >Add....
2. Set up a new throttling profile as described insettingsSettings >Throttling.

3. Back on theNetwork panel, select your new profile from theThrottling drop-down menu.

   

DevTools displays a warning icon next to theNetwork panel to remind you that throttling is enabled.

Throttle WebSocket connections

In addition to HTTP requests, DevTools throttles WebSocket connections since version 99.

To observe WebSocket throttling:

1. Initiate a new connection, for example, by using atest tool.
2. On theNetwork panel, selectNo throttling and send a message through the connection.
3. Create a very slowcustom throttling profile, for example,10 kbit/s. Such a slow profile will help you notice the difference.
4. On theNetwork panel, select the profile and send another message.
5. Toggle theWS filter, click your connection name, open theMessages tab, and check the time difference between sent and echoed messages with and without throttling. For example:

Emulate slow network connections from the Network conditions drawer

If you want to throttle the network connection while working in other DevTools panels, use theNetwork conditions drawer.

1. Click the icon to open theNetwork Conditions drawer.
2. Select a connection speed from theNetwork throttling menu.

Manually clear browser cookies

To manually clear browser cookies at any time, right-click anywhere in theRequests table and selectClear browser cookies.

Override HTTP response headers

SeeOverride files and HTTP response headers locally.

Override the user agent

To manually override the user agent:

1. Click the icon to open theNetwork Conditions drawer.
2. ClearSelect automatically.
3. Choose a user agent option from the menu, or enter a custom one in the box.

Search requests

To search across request headers, payloads, and responses:

1. Press the following shortcut to open theSearch tab on the right:

   • On macOS,Command +F.
   • On Windows or Linux,Control +F.

2. In theSearch tab, enter your query and pressEnter. Optionally clickmatch_case orregular_expression to turn on case sensitivity or regular expressions respectively.

3. Click one of the search results. TheNetwork panel highlights in yellow the request that matched. Additionally, the panel also opens theHeaders orResponse tab and highlights the string that matched there, if any.

To refresh search results, clickrefreshRefresh. To clear results, clickblockClear.

For more information on all the ways you can search in DevTools, seeSearch: Find text across all loaded resources.

Filter requests

Filter requests by properties

Use theFilter box to filter requests by properties, such as the domain or size of therequest.

If you can't see the box, theFilters bar is probably hidden. SeeHide the Filters bar.

To invert your filter, check theInvert checkbox next to theFilter box.

You can use multiple properties simultaneously by separating each property with a space. Forexample,mime-type:image/gif larger-than:1K displays all GIFs that are larger than one kilobyte.These multi-property filters are equivalent to AND operations. OR operations aren't supported.

Next is a complete list of supported properties.

• cookie-domain. Show the resources that set a specificcookie domain.
• cookie-name. Show the resources that set a specificcookie name.
• cookie-path. Show the resources that set a specificcookie path.
• cookie-value. Show the resources that set a specificcookie value.
• domain. Only display resources from the specified domain. You can use a wildcard character (*)to include multiple domains. For example,*.com displays resources from all domain names endingin.com. DevTools shows a populates the autocomplete drop-down menu with all of the domains ithas encountered.
• has-overrides. Show requests that have overriddencontent,headers, any overrides (yes), or no overrides (no). You can add the correspondingHas overrides column to the request table.
• has-response-header. Show the resources that contain the specified HTTP response header.DevTools populates the autocomplete drop-down with all of the response headers that it hasencountered.
• is. Useis:running to findWebSocket resources.
• larger-than. Show resources that are larger than the specified size, in bytes. Setting a valueof1000 is equivalent to setting a value of1k.
• method. Show resources that were retrieved over a specified HTTP method type. DevTools populatesthe autocomplete drop-down with all of the HTTP methods it has encountered.
• mime-type. Show resources of a specified MIME type. DevTools populates the autocomplete drop-downwith all MIME types it has encountered.
• mixed-content. Show all mixed content resources (mixed-content:all) or just the ones that are displayed (mixed-content:displayed).
• priority. Show resources whose priority level matches the specified value.
• resource-type. Show resources of a resource type, for example, image. DevTools populates theautocomplete drop-down with all resource types it has encountered.
• response-header-set-cookie. Show raw Set-Cookie headers in the Issues tab. Malformed cookieswith incorrectSet-Cookie headers will be flagged in the Network panel.
• scheme. Show resources retrieved over unprotected HTTP (scheme:http) or protected HTTPS(scheme:https).
• set-cookie-domain. Show the resources that have aSet-Cookie header with aDomain attributethat matches the specified value. DevTools populates the autocomplete with all of the cookiedomains that it has encountered.
• set-cookie-name. Show the resources that have aSet-Cookie header with a name that matches thespecified value. DevTools populates the autocomplete with all of the cookie names that it hasencountered.
• set-cookie-value. Show the resources that have aSet-Cookie header with a value that matchesthe specified value. DevTools populates the autocomplete with all of the cookie values that it hasencountered.
• status-code. Only show resources whose HTTP status code match the specified code. DevToolspopulates the autocomplete drop-down menu with all of the status codes it has encountered.
• url. Show the resources that have aurl matching the specified value.

Filter requests by type

To filter requests by resource type, click theAll,Fetch/XHR,JS,CSS,Img,Media,Font,Doc,WS (WebSocket),Wasm (WebAssembly),Manifest, orOther (any other type not listed here)buttons on theNetwork panel.

If you can't see these buttons, theFilters action bar is probably hidden. SeeHide the Filtersbar.

To show resources of multiple types simultaneously, holdCommand (Mac) orControl (Windows, Linux) andthen click several type filters.

Filter requests by time

Drag left or right on theOverview timeline to display only the requests that were active duringthat timeframe. The filter is inclusive. Any request that was active during the highlighted time isshown.

Hide data URLs

Data URLs are small files embedded into other documents. Any request that you see in theRequests table that starts withdata: is a data URL.

To hide these requests, in theFilters action bar, selectMore filters >check_boxHide data URLs.

The status bar at the bottom displays the number of the shown requests out of the total.

Hide extension URLs

To focus on the code you author, you can filter out irrelevant requests sent by extensions you may have installed in Chrome. Extension requests have URLs that start withchrome-extension://.

To hide extension requests, in theFilters action bar, selectMore filters >check_boxHide extension URLs.

The status bar at the bottom displays the number of the shown requests out of the total.

Show only the requests with blocked response cookies

To filter out everything except the requests with response cookies blocked for any reason, in theFilters action bar, selectMore filters >check_boxBlocked response cookies. Try it on thisdemo page.

The status bar at the bottom displays the number of the shown requests out of the total.

To find out the reason why a response cookie was blocked, select the request, open itsCookies tab, and hover over theinfo information icon.

Additionally, theNetwork panel shows awarning warning icon next to a request with cookies blocked either because of Chrome flags or configuration. Hover over the icon to see a tooltip with a clue and click it to go to theIssues panel for more information.

Show only blocked requests

To filter out everything except blocked requests, in theFilters action bar, selectMore filters >check_boxBlocked requests. To test this, you can use theNetwork request blocking tab in the drawer.

TheRequests table highlights blocked requests in red. The status bar at the bottom displays the number of the shown requests out of the total.

Show only third-party requests

To filter out everything except the requests with origin that differs from page origin, in theFilters action bar, selectMore filters >check_box3rd-party requests. Try it on thisdemo page.

The status bar at the bottom displays the number of the shown requests out of the total.

Sort requests

By default, the requests in theRequests table are sorted by initiation time, but you can sort thetable using other criteria.

Sort by column

Click the header of any column in theRequests table to sort requests by that column.

Sort by activity phase

To change how theWaterfall sorts requests, right-click the header of the Requests table, hover overWaterfall, and select one of the following options:

• Start Time. The first request that was initiated is at the top.
• Response Time. The first request that started downloading is at the top.
• End Time. The first request that finished is at the top.
• Total Duration. The request with the shortest connection setup and request / response is atthe top.
• Latency. The request that waited the shortest time for a response is at the top.

These descriptions assume that each respective option is ranked from shortest to longest. Clickingon theWaterfall column's header reverses the order.

In this example, theWaterfall is sorted by total duration. The lighter portion of each bar is timespent waiting. The darker portion is time spent downloading bytes.

Analyze requests

So long as DevTools is open, it logs all requests in theNetwork panel. Use theNetwork panel toanalyze requests.

View a log of requests

Use theRequests table to view a log of all requests made while DevTools has been open. Clicking orhovering over requests reveals more information about them.

The Requests table displays the following columns by default:

• Name. The filename of, or an identifier for, the resource.

• Status. This column can show the following values:

  

  • HTTP status code, for example,200 or404.
  • CORS error for requests failed due to Cross-Origin Resource Sharing (CORS).
  • (blocked:origin) for requests with misconfigured headers. Hover over this status value to see a tooltip with a hint on what went wrong.
  • (failed) followed by the error message.

• Type. The MIME type of the requested resource.

• Initiator. The following objects or processes can initiate requests:

  • Parser. Chrome's HTML parser.
  • Redirect. An HTTP redirect.
  • Script. A JavaScript function.
  • Other. Some other process or action, such as navigating to a page using a link or entering aURL in the address bar.

• Size. The combined size of the response headers plus the response body, as delivered by theserver.

• Time. The total duration, from the start of the request to the receipt of the final byte inthe response.

• Waterfall. A visual breakdown of each request's activity.

Add or remove columns

Right-click the header of theRequests table and select an option to hide or show it. The displayed options have check marks next to them.

You can add or remove the following additional columns:Path,URL,Method,Protocol,Scheme,Domain,Remote address,Remote address space,Initiator address space,Cookies,Set cookies,Priority,Connection ID,Has overrides, andWaterfall.

Add custom columns

To add a custom column to theRequests table:

1. Right-click the header of theRequests table and selectResponse Headers >Manage Header Columns.
2. In the dialog window, clickAdd custom header, enter its name, and clickAdd.

Group requests by inline frames

If inline frames on a page initiate a lot of requests, you can make the request log friendlier by grouping them.

To group requests by iframes, openSettings inside theNetwork panel and checkcheck_boxGroup by frame.

To view a request initiated by an inline frame, expand it in the request log.

View the timing of requests in relation to one another

Use theWaterfall to view the timing of requests in relation to one another. By default, theWaterfall is organized by the start time of the requests. So, requests that are farther to the leftstarted earlier than those that are farther to the right.

SeeSort by activity phase to see the different ways that you can sort theWaterfall.

Analyze the messages of a WebSocket connection

To view the messages of a WebSocket connection:

1. Under theName column of theRequests table, click the URL of the WebSocket connection.
2. Click theMessages tab. The table shows the last 100 messages.

To refresh the table, re-click the name of the WebSocket connection under theName column of theRequests table.

The table contains three columns:

• Data. The message payload. If the message is plain text, it's displayed here. For binaryopcodes, this column displays the opcode's name and code. The following opcodes are supported:Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame, and Pong Frame.
• Length. The length of the message payload, in bytes.
• Time. The time when the message was received or sent.

Messages are color-coded according to their type:

• Outgoing text messages are light-green.
• Incoming text messages are white.
• WebSocket opcodes are light-yellow.
• Errors are light-red.

Analyze events in a stream

To view the events that servers stream throughFetch API,EventSource API, and XHR:

1. Record network requests on a page that streams events. For example, open thisdemo page and click any of the three buttons.
2. InNetwork, select a request and open theEventStream tab.

To filter events, specify a regular expression in the filter bar at the top of theEventStream tab.

To clear the list of captured events, clickblockClear.

View a preview of a response body

To view a preview of a response body:

1. Click the URL of the request, under theName column of theRequests table.
2. Click thePreview tab.

This tab is mostly useful for viewing images.

View a response body

To view the response body to a request:

1. Click the URL of the request, under theName column of the Requests table.
2. Click theResponse tab.

View HTTP headers

To view HTTP header data of a request:

1. Click a request in theRequests table.
2. Open theHeaders tab and scroll down toGeneral,Response Headers,Request Headers, and, optionally,Early Hints Headers sections.

In theGeneral section, DevTools shows you human-readable status message next to the received HTTP status code.

In theResponse Headers section, you can hover over a header value and click theeditEdit button tooverride the response header locally.

View HTTP header source

By default, theHeaders tab shows header names alphabetically. To view the HTTP header names in theorder they were received:

1. Open theHeaders tab for the request you're interested in. SeeView HTTP headers.
2. Clickview source, next to theRequest Header orResponse Header section.

Provisional headers warning

Sometimes theHeaders tab shows theProvisional headers are shown... warning message. This may be due to the following reasons:

• The request wasn't sent over the network but was served from a local cache, which doesn't store the original request headers. In this case, you candisable caching to see the full request headers.

• The network resource isn't valid. For example, executefetch("https://jec.fish.com/unknown-url/") in theConsole.

DevTools can also display only provisional headers due to security reasons.

View request payload

To view the request's payload, that is, its query string parameters and form data, select a request from theRequests table and open thePayload tab.

View payload source

By default, DevTools shows the payload in a human-readable form.

To view the sources of query string parameters and form data, on thePayload tab, clickview source next to theQuery String Parameters orForm Data sections.

View URL-decoded arguments of query string parameters

To toggle URL-encoding for arguments, on thePayload tab, clickview decoded orview URL-encoded.

View cookies

To view the cookies sent in a request's HTTP header:

1. Click the URL of the request, under theName column of the Requests table.
2. Click theCookies tab.

For a description of each of the columns, seeFields.

To modify cookies, seeView, edit, and delete cookies.

View the timing breakdown of a request

To view the timing breakdown of a request:

1. Click the URL of the request, under theName column of theRequests table.
2. Click theTiming tab.

SeePreview a timing breakdown for a faster way to access this data.

SeeTiming breakdown phases explained for more information about each of the phases that youmay see in theTiming tab.

Preview a timing breakdown

To view a preview of the timing breakdown of a request, hover over the request's entry in theWaterfall column of the Requests table.

SeeView the timing breakdown of a request for a way to access this data that does not requirehovering.

Timing breakdown phases explained

Here's more information about each of the phases you may see in theTiming tab:

• Queueing. The browser queues requests before connection start and when:
  • There are higher priority requests. Request priority is determined by factors such as the type of a resource, as well as its location within the document. For more information, read theresource priority section of thefetchpriority guide.
  • There are already six TCP connections open for this origin, which is the limit. (Applies toHTTP/1.0 and HTTP/1.1 only.)
  • The browser is briefly allocating space in the disk cache.
• Stalled. The request could be stalled after connection start for any of the reasons described inQueueing.
• DNS Lookup. The browser is resolving the request's IP address.
• Initial connection. The browser is establishing a connection, including TCP handshakes or retriesand negotiating an SSL.
• Proxy negotiation. The browser is negotiating the request with aproxy server.
• Request sent. The request is being sent.
• ServiceWorker Preparation. The browser is starting up the service worker.
• Request to ServiceWorker. The request is being sent to the service worker.
• Waiting (TTFB). The browser is waiting for the first byte of a response. TTFB stands for TimeTo First Byte. This timing includes 1 round trip of latency and the time the server took toprepare the response.
• Content Download. The browser is receiving the response, either directly from the network or from a service worker. This value is the total amount of time spent reading the response body. Larger than expected values could indicate a slow network, or that the browser is busy performing other work which delays the response from being read.

View initiators and dependencies

To view the initiators and dependencies of a request, holdShift and hover over the request in theRequests table. DevTools colors initiators green, and dependencies red.

When theRequests table is ordered chronologically, the first green request above the request thatyou're hovering over is the initiator of the dependency. If there's another green request abovethat, that higher request is the initiator of the initiator. And so on.

View load events

DevTools displays the timing of theDOMContentLoaded andload events in multiple places on theNetwork panel. TheDOMContentLoaded event is colored blue, and theload event is red.

View the total number of requests

The total number of requests is listed in the status bar at the bottom of theNetwork panel.

Caution:Caution: This number only tracks requests that have been logged since DevTools was opened. Ifother requests occurred before DevTools was opened, those requests aren't counted.

View the total size of transferred and loaded resources

DevTools lists the total size of transferred and loaded (uncompressed) resources in the status bar at the bottom of theNetwork panel.

Caution:Caution: This number only tracks requests that have been logged since DevTools was opened. Ifother requests occurred before DevTools was opened, those requests aren't counted.

SeeView the uncompressed size of a resource to see how large resources are after the browser uncompresses them.

View the stack trace that caused a request

When a JavaScript statement causes a resource to be requested, hover over theInitiator columnto view the stack trace leading up to the request.

View the uncompressed size of a resource

CheckSettings >Big request rows and then look at the bottom value of theSize column.

In this example, the compressed size of thewww.google.com document that was sent over the network was43.8 KB, whereas the uncompressed size was136 KB.

Export requests data

You can export or copy the list of requests, with filters applied, in several ways described next.

Save all network requests to a HAR file

HAR (HTTP Archive) is a file format used by several HTTP session tools to export the captured data. The format is a JSON object with a particular set of fields.

To reduce the chances of accidental leaks of sensitive information, by default you can export the "sanitized" network log in HAR format that excludes sensitive information such asCookie,Set-Cookie, andAuthorization headers. If required, you can also export the logwith sensitive data.

To save all network requests to a HAR file, pick one of the two ways:

• Right-click any request in theRequests table and selectCopy >Save all [listed] as HAR (sanitized) orSave all [listed] as HAR (with sensitive data).

  

• ClickdownloadExport HAR (sanitized)... in the action bar at the top of theNetwork panel.

  To export with sensitive data, first, turn onsettingsSettings >Preferences >Network >check_boxAllow to generate HAR with sensitive data, then click thedownloadExport button and selectExport HAR (with sensitive data) from the drop-down menu.

  

Once you have a HAR file, you can import it back into DevTools foranalysis in two ways:

• Drag-and-drop the HAR file into theRequests table.
• ClickuploadImport HAR in the action bar at the top of theNetwork panel.

Note: TheNetwork panel reads and showsinitiators for the requests imported from HAR files.

Copy a request, a filtered set of requests, or all of them to the clipboard

Under theName column of theRequests table, right-click a request, hover overCopy, andselect one of the following options.

To copy a single request, its response, or stack trace:

• Copy URL. Copy the request's URL to the clipboard.
• Copy as cURL. Copy the request as a cURL command.
• Copy as PowerShell. Copy the request as a PowerShell command.
• Copy as fetch. Copy the request as a fetch call.
• Copy as fetch (Node.js). Copy the request as a Node.js fetch call.
• Copy response. Copy the response body to the clipboard.
• Copy stack trace. Copy the request's stack track to the clipboard.

To copy all requests:

• Copy all URLs. Copy URLs of all requests to the clipboard.
• Copy all as cURL. Copy all requests as a chain of cURL commands.
• Copy all as PowerShell. Copy all requests as a chain of PowerShell commands.
• Copy all as fetch. Copy all requests as a chain of fetch calls.
• Copy all as fetch (Node.js). Copy all requests as a chain of Node.js fetch calls.
• Copy all as HAR (sanitized). Copy all requests as HAR data without sensitive data such asCookie,Set-Cookie, andAuthorization headers.
• Copy all as HAR (with sensitive data). Copy all requests as HAR data with sensitive data.

To copy a filtered set of requests, apply afilter to the network log, right-click a request, and select:

• Copy all listed URLs. Copy URLs of all filtered requests to the clipboard.
• Copy all listed as cURL. Copy all filtered requests as a chain of cURL commands.
• Copy all listed as PowerShell. Copy all filtered requests as a chain of PowerShell commands.
• Copy all listed as fetch. Copy all filtered requests as a chain of fetch calls.
• Copy all listed as fetch (Node.js). Copy all filtered requests as a chain of Node.js fetch calls.
• Copy all listed as HAR (sanitized). Copy all filtered requests as HAR data without sensitive data such asCookie,Set-Cookie, andAuthorization headers.
• Copy all listed as HAR (with sensitive data). Copy all filtered requests as HAR data with sensitive data.

Change the layout of the Network panel

Expand or collapse sections of theNetwork panel UI to focus on what's important to you.

Hide the Filters action bar

By default, DevTools shows theFilters bar at the top of theNetwork panel. Clickfilter_altFilter to hide it.

Use big request rows

Use big rows when you want more whitespace in your network requests table. Some columns alsoprovide a little more information when using big rows. For example, the bottom value of theSize column is the uncompressed size of a request and thePriority column shows both the initial (bottom value) and final (top value) fetch priority.

OpenSettings and clickBig request rows to see big rows.

Hide the Overview track

By default, DevTools shows theOverview track. OpenSettings and clear theShow overview checkbox to hide it.