DEV Community

Akhilesh Yadav
Akhilesh Yadav

Posted on

Using Browser Devtools Advance Network Search filters Effectively

This is my first article on dev.to and just felt to share some DevTools network search filter tips.
Many of us work on Web Development stuffs and have to use browser devtools very often to figure out many things.

I am just going to share tricks and tips related to Filter Search given inside Firefox and Chrome Browser Devtools.

You can quickly open the DevTools by simply hitting the F12 key. In most cases though, you also want to inspect an element on a page. There's a special shortcut that gets you there even faster: hitting Ctrl+Shift+C will open the DevTools and invoke the inspector tool.

Using Network Filter Direct Search

Open the Network panel then press Command+F (Mac) or Control+F (Windows, Linux, Chrome OS) to open the new Network Search pane.

Filter requests by properties

Go to Network Tab and click on filter search box.

Use the Filter text box to filter requests by properties, such as the domain or size of the request.

Keyword Meaning Examples Browser
domain Shows resources coming from a specifc domain. domain:mozilla.org Both
has-response-header Shows resources that contain the specified HTTP response header. has-response-header:cache-control Both
is is:cached and is:from-cache shows only resources coming from cache. is:running shows only resources, which are currently being transferred. is:cached Both
larger-than Shows resources that are larger than the specified size in bytes. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024 . larger-than:2000 Both
method Shows resources that have were requested via the specific HTTP request method. method:post Both
mime-type Shows resources that match the specified MIME type. mime-type:application/javascript Both
set-cookie-domain Shows the resources that have a Set-Cookie header with a Domain attribute that matches the specified value. set-cookie-domain:.mozilla.org Both
set-cookie-name Shows the resources that have a Set-Cookie header with a name that matches the specified value. set-cookie-name:_ga Both
set-cookie-value Shows the resources that have a Set-Cookie header with a value that matches the specified value. set-cookie-value:true Both
status-code Shows resources that have the specific HTTP status code. status-code:304 Both
remote-ip Shows resources coming from a server with the specified IP. remote-ip:63.245.215.53 ,OR, remote-ip:[2400:cb00:2048:1::6810:2802] Firefox
cause Shows resources matching a specific cause type. The types can be found in the description of the cause column . cause:js , cause:stylesheet , cause:img Firefox
transferred Shows resources having a specific transferred size or a transferred size close to the one specified. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024 . transferred:1k Firefox
size Shows resources having a specific size (after decompression) or a size close to the one specified. k can be used as suffix for kilobytes and m for megabytes, e.g. the value 1k is equivalent to 1024 . size:2m Firefox
scheme Shows resources transferred via the given scheme. scheme:http Firefox
regexp Shows the resources having a URL that matches the given regular expression. regexp:\d{5} ,OR, regexp:mdn mozilla
mixed-content Show all mixed content resources (mixed-content:all) or just the ones that are currently displayed mixed-content:displayed Chrome

Extra Tricks:

  1. You can use multiple properties simultaneously by separating each property with a space. For example, 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 are currently not supported.
  2. You can also filter requests only of method type POST, by using: -- method:POST would show only requests with POST method -- -method:GET, here - inverts the filter, and shows request with all type except GET. -- You can also type - to get a hint of types available and use it.

Some more examples
domain:
-- Use a * character to include multiple domains.
-- Ex: *.com, domain:google.com, -domain:bing.com

has-response-header:
-- Filter resources with the specified HTTP response header.
-- Ex: has-response-header:Content-Type, has-response-header:age

is:
-- is:running finds WebSocket resources
-- is:from-cache,
-- is:service-worker-initiated
-- is:service-worker-intercepted

larger-than:
-- Note: larger-than:1000 is equivalent to larger-than:1k
-- Ex: larger-than:420, larger-than:4k, larger-than:100M

method:
-- method:POST, -method:OPTIONS, method:PUT, method:GET

mime-type:
-- Ex: mime-type:application/manifest+json, mimetype:image/x-icon

mixed-content:
-- mixed-content:all (Show all mixed-content resources)
-- mixed-content:displayed (Show only those currently displayed) (never used this personally)

scheme:
-- Ex: scheme:http, scheme:https,
-- Note that there are also scheme:chrome-extension, scheme:data

set-cookie-domain:
-- Ex: set-cookie-domain:.google.com

set-cookie-name:
-- Match Set-Cookie response headers with name
-- Ex: set-cookie-name:WHATUP

set-cookie-value:
-- Match Set-Cookie response headers with value
-- Ex: set-cookie-value:AISJHD98ashfa93q2rj_94w-asd-yolololo

status-code:
-- Match HTTP status code
-- Ex: status-code:200, -status-code:302

Reference:
https://developers.google.com/web/tools/chrome-devtools/network/reference

Lets connect:
https://ayzom.com
https://www.linkedin.com/in/arki7n
https://www.twitter.com/in/arki7n

Top comments (0)