---
title: 'Stop scrolling the Network panel: filter it'
description: >-
  The Network panel's filter box is not a search box. It takes keys - status-code, method, domain -
  and they combine, which turns four hundred requests into the...
url: https://expiredqueues.com/filter-chrome-devtools-network-requests/
date: '2023-08-15T09:00:00.000Z'
image: https://expiredqueues.com/images/og/filter-chrome-devtools-network-requests-16e0d23c.jpg
---

Developer Tools posts tips-tricks

# Stop scrolling the Network panel: filter it

15 August 2023 By Adrian 2 min read

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?

[Filtering the Chrome DevTools Network panel by status code and method](https://www.youtube-nocookie.com/embed/mAmihs5G3kE)

## 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:

```text
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:

```text
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:

```text
-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:

| Key                    | Matches                                               |
| ---------------------- | ----------------------------------------------------- |
| `status-code:`         | The HTTP status — `404`, `201`, `304`                 |
| `method:`              | `GET`, `POST`, `OPTIONS`                              |
| `domain:`              | The host, wildcards allowed — `domain:*.stripe.com`   |
| `mime-type:`           | `application/json`, `text/css`                        |
| `larger-than:`         | A size, in bytes or with a suffix — `larger-than:1M`  |
| `has-response-header:` | Requests carrying a given response header             |
| `set-cookie-name:`     | Responses setting a named cookie                      |
| `is:`                  | `running`, `from-cache`, `service-worker-intercepted` |
| `resource-type:`       | `document`, `fetch`, `websocket`, `image`             |

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.

[Previously Flutter vs. React Native: What You Need to Know Before Choosing Your Mobile App Framework](https://expiredqueues.com/flutter-vs-react-native-what-you-need-to-know/) [Next A better ls on macOS: use eza, but not as an alias](https://expiredqueues.com/better-ls-macos-eza/)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Stop scrolling the Network panel: filter it",
  "datePublished": "2023-08-15T09:00:00.000Z",
  "dateModified": "2023-08-15T09:00:00.000Z",
  "author": {
    "@type": "Person",
    "name": "Adrian",
    "url": "https://expiredqueues.com/about/"
  },
  "publisher": {
    "@type": "Person",
    "name": "Adrian"
  },
  "mainEntityOfPage": "https://expiredqueues.com/filter-chrome-devtools-network-requests/",
  "keywords": "posts, tips-tricks, tools, chrome, debugging, micro-tuts",
  "articleSection": "Developer Tools"
}
```