![Umar Hansa](https://web.dev/images/authors/umarhansa.jpg) Umar Hansa [X](https://twitter.com/umaar) [Homepage](https://umaar.com/)

<br />

![Use Network color groups to easily identify a resource type](https://developer.chrome.com/static/blog/network-colour-groups/image/use-network-color-groups-1a75f4ff21219.gif)

Get a simple overview of resource types in the Network panel with the **Color-code resource types** feature. To enable (if not already)

1. Go to Settings (the cog wheel)
2. In the general section, find the network heading.
3. Check **Color-code resource types**.

Each of Scripts, Stylesheets, documents, fonts and more will be colored based on its type so you can easily understand what you're looking at without having to read the filename.