This tab shows the component markup including the tree of nested
components.
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
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.

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.

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.