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

Sofia Emelianova

[要素] > [プロパティ] ペインでは、DOM オブジェクトのプロパティを閲覧、フィルタできます。

[プロパティ] ペインを開く

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

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

独自のプロパティを見つける

[プロパティ] ペインでは、並べ替えられて、オブジェクトの独自のプロパティが最初に太字で表示されます。

継承されたプロパティの発生元を確認する

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

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

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

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

フィルタ プロパティ

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

すべての宿泊施設を表示

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

すべての宿泊施設を表示するには、[すべて表示] チェックボックスをオンにします。

プロパティについて理解する

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

シンプルなプロパティ

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

オブジェクトと配列

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

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

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

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

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

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

レギュラー フォントのプロパティはプロトタイプ チェーンから継承されます。DevTools では、組み込みの HTML 要素に対して関連するアクセサが評価されます。 DevTools では、プロパティを見つけやすくするために最初にプロパティを並べ替えます。

列挙可能なプロパティと列挙できないプロパティ

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

Methods

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

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