Filtering Network Requests in Chrome DevTools

2 min read  •  18 Feb 2022
Views:

filter-network-requests


While development or debugging some error, there is often flood of api calls which happens in Network tab. We can filter those api calls as per our needs on the basis of various things like its domain, method, resource type etc...


Let's take example of Tickertape (website) and see how we can filter those api calls.


Filtering based on Request Method: GET/POST/...

To filter the requests based on method, simply write method:value (eg: method:GET, method:POST, etc...) in the filter input.


filter-method


Filtering based on domain

There are multiple network calls which happen in the complete load of a website, this could be images, fonts, media files, websocket requests etc... Among these requests the domain of the request could be different. Let's say if we want to view only api requests, we can filter the domain as the domain of api host and we will get only api request.


filter-domain


Note: We can also use * selector to select all subdomains of a TLD. For instance, if you want to select all subdomains of myapi.com then you can write *.myapi.com


Combining filters

We can also combine two or more filter by joining them with a space.

For example, if we want to filter on domain and method both, we can do as following:

domain:api.tickertape.in method:GET

Not/Inverse Filter

There could be cases where you might need to filter network calls on inverse of a condition. For example, filtering all api calls whose method is not GET.

To do so, add a hyphen (-) before your conditon. If you want to check all api request which are not GET request, you can do following:

-method:GET

filter-inverse


Resources

Check this link for complete official documentation of network calls filtering.