CODEWITHSUNDEEP
performanceperformance-testingdevtools
michael mason
michael mason

Reputation: 41

Chrome DevTools Performance Audit - Main Colors

Does anyone know what the colors on the main verticals represent? Some are obvious, like blue is html, purple is css.. but I'm unsure what's the difference between pink vs. light green.

Screnshot of Perfomance Audit

Upvotes: 4

Views: 483

Answers (1)

J_H
J_H

Reputation: 20550

The Fine Manual explains that the colors are arbitrary:

DevTools assigns scripts random colors. In Figure 16, function calls from one script are colored light green. Calls from another script are colored beige. The darker yellow represents scripting activity, and the purple event represents rendering activity. These darker yellow and purple events are consistent across all recordings.

View network requests uses a fixed set of colors:

Requests are color-coded as follows:

HTML: Blue, CSS: Purple, JS: Yellow, Images: Green

Upvotes: 2

Related Questions