Level Up on Chrome DevTools Network Debugging with Advanced Filters

Eran Schoellhorn
Feb 16, 2017 · 2 min read

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…

Image for post
Image for post
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.

Image for post
Image for post
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

Image for post
Image for 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!

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store