Stop scrolling the Network panel: filter it

There is a particular kind of wasted afternoon that starts with a page making four hundred requests and ends with you scrolling the Network panel, squinting at a status column, looking for the one that came back 404.

The filter box above that list is not a search box. It takes keys, and the keys combine.

Rather watch it?

Getting there without the mouse

Right-click, Inspect, then click the Network tab is the long way round. The Command Menu is faster and it works from whatever panel you happen to be in: Cmd + Shift + P on macOS, Ctrl + Shift + P everywhere else. Type network, take the Network panel, done.

The filter box takes keys

Click into the filter box and type status-code:. DevTools will offer you the codes it has actually seen on this page, so you are picking from real traffic rather than guessing. Press Tab to accept one:

status-code:404

The list collapses to the failures. That alone is most of the value.

They combine

This is the part people miss. Filters are space-separated and they are AND-ed together, so you can describe the request you want rather than hunting for it. Every POST that got a 201 back:

method:POST status-code:201

Which, on a page you are debugging, usually means show me the writes that succeeded — a question the status column cannot answer on its own.

Prefix any of them with - to invert it. Everything that was not an image, say:

-mime-type:image/png -mime-type:image/jpeg

The rest of the keys

The full set, all of them typeable and all of them combinable:

Anything you type that is not a key is treated as a plain substring match against the URL, which is what most people use the box for and why the keys go unnoticed.

Two worth keeping in your fingers: larger-than:500k when a page feels heavy and you want the culprit named rather than described, and is:from-cache when you are trying to work out whether your cache headers are doing anything at all.