/dev tips

(41) Preview JS values inline while debugging Trigger pseudo classes (43)

Chrome DevTools: Use Network colour groups to easily identify a resource type

25 May 2015
Use Network colour groups to easily identify a resource type

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 coloured based on its type so you can easily understand what you're looking at without having to read the filename.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.