In Chrome DevTools, the Network panel that offers you valuable insights into a web page's network activity is one of the most frequently used tools.
This article shares a set of highly desired improvements to the Network panel that Ioana Forfota and Silvia Eremia made in the course of their STEP internship. These improvements have been eagerly awaited and were carefully selected from the extensive backlog on Chromium's issue tracker and make the panel more accessible, intuitive, and informative.
With these new features, the Network panel gives web developers the ability to:
- Focus only on relevant network requests.
- Understand HTTP status codes without the need for external references.
- Quickly identify and address request errors.
- Understand JSON subtype responses.
Read on for all the details!
Filter Chrome extension requests
Chrome extensions can make their own network requests, which appear alongside the page's requests in the Network panel. If you're not actively developing an extension, these requests likely won't be relevant to you. Previously, the only way to hide them was to use the -scheme:chrome-extension filter or debug in Incognito mode.
From Chrome 117 this has become easier. To declutter the Network panel, DevTools now offers a checkbox to exclude Chrome extension requests.
Discussions concerning the default state of this feature have been ongoing. Initially, we considered enabling it by default, with the idea that it could enhance the experience for the majority of users. However, this approach might leave some users unaware that Chrome extension URLs can trigger requests. This could also pose challenges for extension developers. Therefore, the default state is set to 'disabled'.
With this checkbox turned on, your request list will be cleaner, less distracting, and more focused on the requests that matter the most, so that you can have a much more pleasant debugging experience!
HTTP response status texts
Understanding HTTP status codes is essential for effective debugging. However, constantly searching for their meanings can be inconvenient. DevTools has introduced a helpful enhancement: when you hold the pointer over over a status code in the request list, a tooltip will instantly provide its status text–a descriptive title that clarifies its meaning.
The status text is also visible in the headers view right next to the code. While previously available only for HTTP/1.1, these features are now extended to HTTP/2 and HTTP/3. These seemingly small adjustments have a significant impact, saving you time and allowing you to focus on debugging rather than searching for code meanings.
Enhanced error visibility
We've made it easier to quickly spot errors and address them without digging deep into the panel. To achieve this, instead of just highlighting error messages with text color changes, we added indicative icons to draw attention to request errors, such as those with a status code of 404. These subtle yet helpful indicators will make errors more noticeable, ensuring you don't overlook important issues.
Pretty-printing JSON subtypes
Web development frequently involves inspecting JSON responses, but reading raw unformatted JSONs is very inconvenient. Dealing with such responses, particularly subtypes like ld+json, hal+json, or sparql-results+json, may be frustrating, for example when these show up in a single line. To make things easier, DevTools has introduced a more user-friendly, collapsible presentation for JSON subtypes. Now, these responses are formatted, eliminating the need for developers to rely on external tools. This redesign offers a simple and highly readable representation.
Positive feedback from the community
Even though these features are only in their early stages of adoption, the community's response is overwhelmingly positive feedback. Their successful implementation has left many users delighted with the improvements, significantly enhancing their experience. You can read some of the responses on X:
"Oh, that's neat! ChromeDevTools just stepped up its game by showing human-readable HTTP status codes, making it way easier to see what went wrong with a network request."—TribalIdeas on X
"It's been super helpful lately. Especially dealing with forms with ad blockers and grammar extensions."-MrAhmadAwais on X
Ready to explore these new features? Head over to Chrome DevTools and experience the enhanced Network panel for yourself. Happy debugging!
Download the preview channels
Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!
Getting in touch with the Chrome DevTools team
Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.
- Submit a suggestion or feedback to us via crbug.com.
- Report a DevTools issue using the More options
> Help > Report a DevTools issues in DevTools. - Tweet at @ChromeDevTools.
- Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.