Get Started Using the Chrome DevTools Network Panel Like a Pro

As a web developer, it is possible that you are familiar with chrome webtools And use them daily. Specifically, you might be spending your time in the Chrome DevTools Network panel. You might not know that the network panel has many great features. Knowing how to use them can take your productivity to the next level.

Let us now learn how to filter requests and resources through its special filter command in the Network section of Chrome DevTools.

At first glance, it doesn’t seem like there’s much to explore in the Chrome DevTools network. As you can see, it only shows a list of browser requests, along with their responses, in chronological order. However, the network section has a lot to offer. Let’s learn how to take advantage of one of the most useful features available.

Specifically, the Chrome DevTools Network panel allows you to filter resources and requests. This is especially useful for looking for specific resources that are causing trouble or for weeding out requests that don’t interest you. Filtering requests is easy in the Network panel, but you should learn a few keywords.

In the top-left of the Network panel, you can see an input field like this:

Note that this input field accepts text, keywords, and special commands. Here are some examples of the most useful filter commands available:

• method:POST → It returns all POST requests.
• is:from-cache → It returns all the resources that were retrieved from the cache.
• is:running → It returns all incomplete or unresponsive requests.
• larger-than:200k → It returns all resources that are larger than 200Kb.
• -larger-than:200k → Shows all resources that are less than or equal to 200Kb.
• domain:web.dev → It returns all resources and requests from “web.dev” domain.
• -domain: web.dev → It filters all resources and requests from “web.dev” domain.
• has-response-header:Cache-Control → It returns all requests that include the “Cache-Control” header.
• -has-response-header:Cache-Control → It returns all requests that do not include the “Cache-Control” header.
• mixed-content: → It returns all assets and requests that use HTTP instead of HTTPS.

Note that all filter commands can be combined with an empty space character, as shown below:

<command_1> <command_2> ... <command_n>

For example, method:GET larger-than:100k Will return all GET requests larger than 100Kb. also note that - Activates the negative version of the character command.

You can find a comprehensive list of all the filters available Here, you can also type Cmd/Ctrl + Space Filter input to get autocomplete preview of all commands available.

Chrome DevTools is one of the most useful and adopted tools in web development. Still, you might not know how to use all of its features. In detail, you learned how to use Chrome DevTools to filter requests and resources in the Network panel. This is possible for certain filter commands and keywords. In this article, you got the opportunity to look at the most important ones.

Thanks for reading! I hope you found this article helpful. Feel free to leave any questions, comments or suggestions.