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