devtools-docs icon indicating copy to clipboard operation
devtools-docs copied to clipboard

Document colours for Retainers pane of the profile.

Open addyosmani opened this issue 9 years ago • 2 comments

I got asked about what the blue/black/gray colours in the retainers pane mean today and was unable to infer this from any of our existing docs. The below are my estimations looking through the source, but I could easily be incorrect. Let's verify and document?

  • Gray: object IDs or objects with value null
  • Blue: objects with a bool or numeric value
  • Black: objects with some other value.

Note: the question is not about the object allocation tracker colours (also blue/grey) or how to interpret the yellow/red blocks (which I did document before) but rather the colour of the text.

screenshot 2015-04-01 at 21 23 13

addyosmani avatar Apr 01 '15 20:04 addyosmani

Just to give some color ( hah! ) to my question, here's a screenshot of part of what I'm looking at for the moment.

You can see that one of the properties ngModelGet is blue, however that property is almost certainly a function considering its name and just knowing Angular's source. Since they all have "system / Context" next to them, I figured that maybe it was a variable contained in a closure?

In the bottom screenshot, you can see a gray $$prevSibling property which also caused some of my confusion; other properties of the same type are black. After seeing your description, I'm guessing that it's a reference on another object called $$prevSibling that points to the one I'm currently inspecting

image

image

dcherman avatar Apr 01 '15 22:04 dcherman

FWIW the way I figure this out is inspect the inspector, read the classnames for these style differences, look in cs.chromium.org for how those classes are determined, and that's typically enough to track it down.

paulirish avatar Apr 02 '15 06:04 paulirish