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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

自社物件をスポットする

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

ALT_TEXT_HERE

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

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

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

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

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

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

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

プロパティをフィルタ

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

フィルタ

すべての宿泊施設を表示

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

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

null 値を持つプロパティ。

プロパティについて

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

シンプルなプロパティ

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

オブジェクトと配列

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

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

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

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

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

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

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

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

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

メソッド

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

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