CODEWITHSUNDEEP
google-chromegoogle-chrome-devtoolsprofiler
hh54188
hh54188

Reputation: 15646

What does each color mean in Chrome devtools profile flame chart

When I use Chrome devtools's profile tool to record javascript CPU run time, and switch to flame chart, I see lots color blocks, some block's color look similar, some are different.

What does each kind of color represent? What are the differences?

Upvotes: 21

Views: 4211

Answers (2)

Ashwin Aggarwal
Ashwin Aggarwal

Reputation: 657

As mentioned on the Chrome Dev Site

"The colors in the Flame Chart fairly random, however functions will always be colored the same across invocations. This allows you to see a pattern of execution and then spot outliers easier. There is no correlation to the colors used in the Timeline."

Upvotes: 11

Konrad Dzwinel
Konrad Dzwinel

Reputation: 37913

Colors are only there to make chart readable (and pretty!), there is no special meaning associated with them. Each function gets a random color that allows you to easily spot calls to the same function.

I've made two snapshots of exactly the same code below (restarting DevTools in between): flame chart #1 flame chart #2

Upvotes: 13

Related Questions