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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

要素パネルが [プロパティ] タブで開いている

所有する宿泊施設をスポット検索する

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

ALT_TEXT_HERE

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

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

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

プロトタイプ チェーン上のゲッターまで size プロパティをトレースしています。

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

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

プロトタイプ固有のプロパティ。

プロパティをフィルタ

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

フィルタ

すべてのプロパティを表示

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

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

null 値を含むプロパティ。

プロパティについて

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

単純なプロパティ

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

オブジェクトと配列

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

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

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

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

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

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

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

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

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

メソッド

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

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