Level Up on Chrome DevTools Network Debugging with Advanced Filters

If you’re like me, you spend plenty of time in Chrome DevTools, you might even consider yourself pretty proficient with it. If you’re even more like me, you probably tolerate a whole bunch of little things that you might be able to do more efficiently but because they are individually so miniscule, you just deal with it.

I picked up a new technique today that seemed worth sharing, the topic pertains to debugging requests in the Network tab. As you may already know, the Network tab allows you to view each request made by Chrome in a given span of time…

The Network Tab

On first glance, you can tell this view has a wealth of information that could be vital in identifying performance concerns, tracing requests, inspecting payloads, and much, much more. That said, I often come here for a specific reason — to find one certain request.

Enter: FILTER BAR!

The filter bar is great for narrowing down what could be a pretty substantial list of items. The most common interaction I’ve had with this interface has been the request type filters, All, XHR, JS, etc. They’re great.

To a further extent, I’ve used the “Filter” input to perform basic fuzzy searches to narrow down requests to a specific domain. A convenience I’ve always wished for, however, is the ability to filter by HTTP method. After all, I’m usually looking for specific requests and often I only want to see POST requests. There’s no button for that, what do?!!

Advanced Filters to The Rescue!

Just as you would expect, the developers of Chrome have loaded the Filter input with some hidden functionality. Using special properties, you can build a criteria with which the request list will be filtered. My desire to see all POST requests, for example? Easy:method:POST

Boom. There’s that single request you actually cared about. Like magic!

Pro-Status Filtering

Naturally, you can combine filters just by separating them with spaces. To lock your filter to a specific domain and the request method: domain:example.com method:POST

Sweet!

The full list of filterable properties is available in the DevTools documentation so be sure to check it out to get the full scoop. Enjoy!