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

Sofia Emelianova

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

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

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

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

自社物件をスポットする

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

継承されたプロパティの起源を見つける

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

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

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

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

プロパティをフィルタ

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

すべての宿泊施設を表示

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

すべてのプロパティを表示するには、[すべて表示] チェックボックスをオンにします。

プロパティについて

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

シンプルなプロパティ

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

オブジェクトと配列

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

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

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

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

所有プロパティと継承プロパティ

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

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

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

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

メソッド

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

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