[Component Tree (コンポーネントツリー)] タブ

ノードをクリックすると、サイドバーに選択したコンポーネントの詳細が表示されます。コンポーネントツリーは手動で更新する必要がありますが、サイドバーのコンポーネントの詳細は自動的に更新されます。

サイドバーには、次のセクションがあります。

トップパネル

• Descriptor (記述子) — prefix://namespace:name 形式のコンポーネントの記述。
• Global ID (グローバル ID) — アプリケーションのライフサイクルにおけるコンポーネントの一意の識別子。
• aura:id — コンポーネントのローカル ID (定義されている場合)。
• IsRendered — コンポーネントはコンポーネントツリーに表示できますが、アプリケーションには表示できません。コンポーネントは、v.body や式 ({!v.myCmp} など) に含まれる場合に表示されます。
• IsValid — コンポーネントが破棄されると、無効になります。無効なコンポーネントへの参照は保持できますが、使用しないでください。
• HTML Elements (HTML 要素) — コンポーネント (子コンポーネントを含む) の HTML 要素の数。
• Rerendered (再表示) — Inspector を開いてからのコンポーネントの再表示回数。コンポーネントのプロパティを変更するとダーティになり、再表示がトリガされます。再表示はコストのかかる操作になる可能性があるため、可能であれば避けることが一般的です。
• Attribute & Facet Value Provider (属性値プロバイダとファセット値プロバイダ) — 通常、属性値プロバイダとファセット値プロバイダは同じコンポーネントです。同じである場合、これらは 1 つのエントリに統合されます。

  属性値プロバイダは、式の属性値を提供するコンポーネントです。次の例では、<c:myComponent> の名前属性で属性値プロバイダの avpName 属性の値を取得しています。

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

  ファセット値プロバイダは、ファセット属性 (Aura.Component[] 型の属性) の値プロバイダです。ファセット値プロバイダは、コンポーネント属性値プロバイダとは異なる可能性があります。これは複雑なため、ここでは扱いません。ただし、ファセットの式では属性値プロバイダではなくファセット値プロバイダが使用されることを知っておくことは重要です。

属性

コンポーネントの属性値を表示します。式またはコードで属性を参照する場合、v.attributeName を使用します。

[[Super]] ([[スーパー]])

コンポーネントで別のコンポーネントを拡張する場合、サブコンポーネントの作成時にスーパーコンポーネントのインスタンスが作成されます。各スーパーコンポーネントには、独自のプロパティセットがあります。スーパーコンポーネントには独自の属性セクションがありますが、このスーパーコンポーネントには body 属性のみがあります。他のすべての属性値は、拡張階層で共有されます。

Model (モデル)

[Model (モデル)] セクションのあるコンポーネントが表示されることがあります。モデルは廃止される予定の機能で、デバッグのためにのみ含まれています。コードが壊れるため、モデルは参照しないでください。

Inspector の任意の場所でコンポーネントの参照をクリックして、そのコンポーネントを指し示す $auraTemp 変数を生成します。[Console (コンソール)] タブで $auraTemp を参照して、コンポーネントをさらに調査できます。

次のコマンドは、$auraTemp 変数を使用してコンポーネントのコンテンツを調査するときに便利です。

$auraTemp+""

コンポーネント記述子を返します。

$auraTemp.get("v.attributeName")

attributeName 属性の値を返します。

$auraTemp.getElement()

対応する DOM 要素を返します。

inspect($auraTemp.getElement())

[Elements (要素)] タブを開き、コンポーネントの DOM 要素を調査します。