Filtering requests in Developer Tools
Using browser developer tools is essential for web development and debugging. One useful feature is the ability to filter network requests, which helps you focus on specific types of resources or requests. This guide will show you how to use filtering in Dev Tools.
See requests in Developer Tools
When you open Developer tools in a browser, using F12 or right-clicking and selecting 'Inspect', you can navigate to the 'Network' tab. Here, you will see all the network requests made by the webpage.
This view shows an overview with requests. Above the requests list, there is a filter input field that allows you to filter the requests based on different criteria. There are also predefined filter buttons for common request types.
Filter network requests by request type
The 'request type' filters allow you to quickly filter requests by common types, such as 'XHR', 'JS', 'CSS', 'Img' and 'Font'.
Filter network requests by text
There are different ways to use this input field. When you just type in the filter input field, it will filter requests that match the text you entered. This is a simple text match against the URL of the requests.
Filter requests by keywords
You can also use specific filter keywords to filter requests more precisely.
When you want to filter out specific requests, you can use the minus sign (-) before the keyword. Or use the 'Invert' checkbox (next to the input field) to invert the filter.
Filter by method
Type 'method:' followed by the HTTP method you want to filter by, such as GET, POST, PUT, DELETE, etc.
Show only GET requests.
method:GET
Exclude OPTIONS requests.
-method:OPTIONS
Filter by status code
Type 'status-code:' followed by the status code you want to filter by.
Show only requests with status code 200.
status-code:200
Exclude requests with status code 404.
-status-code:404
Filter by MIME type
Type 'mime-type:' followed by the MIME type you want to filter by.
Show only requests with MIME type 'text/html'.
mime-type:text/html
Filter by domain
You can filter requests based on the domain using 'domain:' followed by the domain name. You can use a wildcard (*) to multiple (sub)domains.
Show requests from the domain 'example.com'.
domain:*example.com
Filter by regex
You can also use regular expressions to filter requests. Enclose your regex pattern in forward slashes (/).
Show requests matching the regex pattern: URL that ends with '/favicon.ico'.
/.*\/favicon\.ico$/
Filter by size
You can filter requests based on their size using 'larger-than:' followed by the size in bytes. 1000 bytes = 1kB.
Show requests larger than 40kB.
larger-than:40k
More keywords
There are more filter keywords available in Developer Tools. You can find a complete list in the Chrome DevTools documentation.