Component Tree Tab

This tab shows the component markup including the tree of nested components.
Component Tree tab

Collapse or Expand Markup

Expand or collapse the component hierarchy by clicking a triangle at the start of a line.

Refresh the Data

The component tree is expensive to serialize, and doesn't respond to component updates. You must manually update the tree when necessary by scrolling to the top of the panel and clicking the Refresh Refresh icon icon.

See More Details for a Component

Click a node to see a sidebar with more details for that selected component. While you must manually refresh the component tree, the component details in the sidebar are automatically refreshed.

component details

The sidebar contains these sections:

Top Panel
  • Descriptor—Description of a component in a format of prefix://namespace:name
  • Global ID—The unique identifier for the component for the lifetime of the application
  • aura:id—The local ID for the component, if it’s defined
  • IsRendered—A component can be present in the component tree but not rendered in the app. The component is rendered when it's included in v.body or in an expression, such as {!v.myCmp}.
  • IsValid—When a component is destroyed, it becomes invalid. While you can still hold a reference to an invalid component, it should not be used.
  • HTML Elements—The count of HTML elements for the component (including children components)
  • Rerendered—The number of times the component has been rerendered since you opened the Inspector. Changing properties on a component makes it dirty, which triggers a rerender. Rerendering can be an expensive operation, and you generally want to avoid it, if possible.
  • Attribute & Facet Value Provider—The attribute value provider and facet value provider are usually the same component. If so, they are consolidated into one entry.

    The attribute value provider is the component that provides attribute values for expressions. In the following example, the name attribute of <c:myComponent> gets its value from the avpName attribute of its attribute value provider.

    <c:myComponent name="{!v.avpName}" />

    The facet value provider is the value provider for facet attributes (attributes of type Aura.Component[]). The facet value provider can be different than the attribute value provider for the component. We won't get into that here as it's complicated! However, it's important to know that if you have expressions in facets, the expressions use the facet value provider instead of the attribute value provider.

Attributes
Shows the attribute values for a component. Use v.attributeName when you reference an attribute in an expression or code.
[[Super]]
When a component extends another component, the sub component creates an instance of the super component during its creation. Each of these super components has their own set of properties. While a super component has its own attributes section, the super component only has a body attribute. All other attribute values are shared in the extension hierarchy.
Model
Some components you see might have a Model section. Models are a deprecated feature and they are included simply for debugging purposes. Don't reference models or your code will break.

Get a Reference to a Component in the Console

Click a component reference anywhere in the Inspector to generate a $auraTemp variable that points at that component. You can explore the component further by referring to $auraTemp in the Console tab.

$auraTemp variable in the Console

These commands are useful to explore the component contents using the $auraTemp variable.

$auraTemp+""
Returns the component descriptor.
$auraTemp.get("v.attributeName")
Returns the value for the attributeName attribute.
$auraTemp.getElement()
Returns the corresponding DOM element.
inspect($auraTemp.getElement())
Opens the Elements tab and inspects the DOM element for the component.