devtools-docs
devtools-docs copied to clipboard
Document colours for Retainers pane of the profile.
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.
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
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.