Menu
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?
905
The x-axis of a flame graph measures the duration of each span in the request, so wider spans took more time to complete. The y-axis measures the depth of the call stack (i.e., the number of service calls). Clicking a span on the flame graph typically brings up duration and error data for that service call.
To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.
Open up the DevTools in Chrome and select a color to inspect in the view. To inspect a color, select an element on the page and in the styles pane look for the color property. Next to that color property there should be a small color swatch box. When you click on that, the color palette opens.
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):
144
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."
29
answered Sep 28 '22 17:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
