DOM オブジェクトのプロパティを表示する

Sofia Emelianova

DOM オブジェクトのプロパティを参照、フィルタするには、[要素] > [プロパティ] タブを使用します。

[プロパティ] タブを開く

[プロパティ] タブを開く手順は次のとおりです。

1. DevTools を開きます。デフォルトでは、[要素] パネルが開きます。
2. DOM ツリーでノードを選択します。
3. [プロパティ] タブを開きます。タブが表示されない場合は、[その他] double_arrow をクリックし、プルダウン メニューから選択します。

自社物件をスポットする

[プロパティ] タブでは、オブジェクトの独自のプロパティが最初に太字で表示されます。

継承されたプロパティのオリジンを確認する

[プロパティ] タブでは、組み込み要素に対するアクセサが評価され、オブジェクト上で継承されたものとして通常のフォントで表示されます。

継承されたプロパティの起源を確認するには、オブジェクト、その [[Prototype]]、ネストされた [[Prototype]] の順に展開します。

この例では、プロトタイプ チェーンで元の独自プロパティ（太字）と対応するゲッターを見つけることで、継承された size プロパティの起点をトレースできます。

また、プロトタイプ固有のプロパティは、オブジェクトではなくプロトタイプにのみ表示されます。これにより、オブジェクトの診断が容易になります。

プロパティをフィルタ

プロパティをすばやく見つけるには、[フィルタ] 入力ボックスに名前または値を入力します。

すべての宿泊施設を表示

デフォルトでは、[プロパティ] タブに null と undefined の値を持つプロパティは表示されません。

すべてのプロパティを表示するには、[すべて表示] をオンにします。

プロパティについて

[要素] > [プロパティ] タブには、さまざまなプロパティが表示されます。

シンプルなプロパティ

シンプル プロパティは <name>: <value> のペアです。

オブジェクトと配列

折りたたみ可能（arrow_right）プロパティは、オブジェクト {} または配列 [] です。

JavaScript オブジェクトの検査について詳しくは、オブジェクトのプロパティを検査するをご覧ください。

DOM ノードに対応するプロパティ

DOM ノードに対応するプロパティはリンクです。リンクをクリックして、DOM ツリーで該当するノードを選択します。

独自のプロパティと継承プロパティ

太字のプロパティは、オブジェクト独自のものです。オブジェクトに直接定義されます。

標準フォントのプロパティは、プロトタイプ チェーンから継承されます。これらの値を表示するために、DevTools は組み込みの HTML 要素で関連するアクセサタを評価します。 DevTools では、独自のプロパティを先頭に並べ替えて見つけやすくしています。

列挙可能なプロパティと列挙不可能なプロパティ

列挙可能なプロパティは明るい色で表示されます。列挙できないプロパティはミュートされます。 for … in ループまたは Object.keys() メソッドを使用して、列挙可能なプロパティを反復処理できます。

メソッド

メソッドは f () でマークされます。

関数の詳細については、コンソールで関数を調べるをご覧ください。