chrome devtools network filter reference

This page is mainly about chrome devtools network filter reference

In Chrome DevTools (press F12 on any webpage) there are lots of fun things to poke around with. One of them is the 'Network' tab which shows you all the resources that your browser is loading. I've used the built in filters before to filter for CSS, JS files etc but never experimented with the 'Filter' box on the far left of the filter panel. If it's not visible in DevTools, make sure to click the filter icon (1).

You can obviously use this for any text in the resource filename like 'arrow' or 'script' but there are also some built in flags which can be helpful when trying to narrow down certain resources based on their properties. For instance, I needed to filter out all resources not served from the disk or memory cache to see what was slowing my webpage down.

References

🌐

Network features reference - Chrome Developers

developer.chrome.com

For all of these flags, you can prefix them with a minus sign (-) to negate the filter results.

cookie-domain:

Show the resources that set a specific cookie domain.

Choose from the list provided.

cookie-name:

Show the resources that set a specific cookie name.

Choose from the list provided.

cookie-path:

Show the resources that set a specific cookie path.

Choose from the list provided.

cookie-value:

Show the resources that set a specific cookie value.

Choose from the list provided.

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 ending in .com. DevTools shows a populates the autocomplete dropdown menu with all of the domains it has encountered.

Choose from the list provided.

has-response-header:

Show the resources that contain the specified HTTP response header. DevTools populates the autocomplete dropdown with all of the response headers that it has encountered.

Choose from the list provided.

is:

Use is:running to find WebSocket resources.

Use is:from-cache to find all resources served from the disk or memory cache.

Use is:service-worker-initiated

Use is:service-worker-intercepted

larger-than:

Show resources that are larger than the specified size, in bytes. Setting a value of 1000 is equivalent to setting a value of 1k.

Use larger-than:10 to show items larger than 10kB

Use larger-than:100 to show items larger than 100kB

Use larger-than:1M to show items larger than 1MB

...or supply your own size in bytes.

method:

Show resources that were retrieved over a specified HTTP method type. DevTools populates the autocomplete dropdown with all of the HTTP methods it has encountered.

Use method:GET to show all GET requests

Use method:POST to show all POST requests.

mime-type:

Show resources of a specified MIME type. DevTools populates the autocomplete dropdown with all MIME types it has encountered.

Choose from the list provided.

mixed-content:

Show all mixed content resources (mixed-content:all) or just the ones that are currently displayed (mixed-content:displayed).

Choose from the list provided.

priority:

Show resources whose priority level matches the specified value.

Use priority:low to show all low priority resources

Use priority:medium to show all medium priority resources

Use priority:high to show all high priority resources

Use priority:highest to show all the highest priority resources

resource-type:

Show resources of a resource type, e.g. image. DevTools populates the autocomplete dropdown with all resource types it has encountered.

Choose from the list provided.

scheme:

Show resources retrieved over unprotected HTTP (scheme:http) or protected HTTPS (scheme:https).

Use scheme:http to show resources delivered over insecure HTTP

Use scheme:https to show resources delivered over secure HTTPS

There maybe other options depending on the situation.

set-cookie-domain:

Show the resources that have a Set-Cookie header with a Domain attribute that matches the specified value. DevTools populates the autocomplete with all of the cookie domains that it has encountered.

Choose from the list provided.

set-cookie-name:

Show the resources that have a Set-Cookie header with a name that matches the specified value. DevTools populates the autocomplete with all of the cookie names that it has encountered.

Choose from the list provided.

set-cookie-value:

Show the resources that have a Set-Cookie header with a value that matches the specified value. DevTools populates the autocomplete with all of the cookie values that it has encountered.

Choose from the list provided.

status-code:

Only show resources whose HTTP status code match the specified code. DevTools populates the autocomplete dropdown menu with all of the status codes it has encountered.

Choose from the list provided.