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:
- 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.
- 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)