Filtering Network Requests in Chrome DevTools
2 min read • 18 Feb 2022While 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.
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.
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
Resources
Check this link for complete official documentation of network calls filtering.