查看 DOM 物件的屬性

Sofia Emelianova
Sofia Emelianova

使用「元素」>「屬性」分頁可瀏覽及篩選 DOM 物件的屬性。

開啟「屬性」分頁

如要開啟「Properties」分頁,請按照下列步驟操作:

  1. 開啟開發人員工具。根據預設,「元素」面板會隨即開啟。
  2. 在 DOM 樹狀結構中選取節點。
  3. 開啟「屬性」分頁。如果沒有看到分頁,請按一下「更多」圖示 ,然後從下拉式選單中選取。

「屬性」分頁中開啟的「元素」面板

Spot 本身的屬性

「屬性」分頁會以粗體顯示並排序物件的自己的屬性

ALT_TEXT_HERE

找出繼承屬性的來源

「Properties」分頁會評估內建元素的存取工具,並以「繼承」和一般字型顯示在物件上。

如要找出繼承屬性的來源,請展開物件、其 [[Prototype]]、巢狀 [[Prototype]],依此類推。

在原型鏈上將大小屬性追蹤至其 getter。

在這個範例中,在原型鏈中找出原始屬性 (粗體) 以及對應的 getter,即可追蹤繼承自 size 屬性的來源。

此外,專屬於原型的屬性只會顯示在原型上,不會顯示在物件上。以便輕鬆診斷物件。

原型特定屬性。

篩選資源

如要快速尋找屬性,請在 [篩選器] 輸入方塊中輸入其名稱或值。

篩選器

顯示所有房源

根據預設,「Properties」分頁不會顯示含有 nullundefined 值的屬性。

如要查看所有屬性,請勾選「全部顯示」

含空值的屬性。

瞭解屬性

元素 >「屬性」分頁會顯示多種屬性。

簡易屬性

簡易屬性為 <name>: <value> 的組合。 簡單的房源。

物件和陣列

可摺疊 () 屬性是物件 {} 或陣列 []可收合屬性。

如要進一步瞭解如何檢查 JavaScript 物件,請參閱「檢查物件屬性」。

與 DOM 節點對應的屬性

對應至 DOM 節點的屬性是連結。按一下連結,即可在 DOM 樹狀結構中選取相關節點。 連結至首部 DOM 節點。

擁有和沿用的資源

粗體字的屬性是物件的屬性。這些是在物件上直接定義。

一般字型的屬性沿用自原型鏈。因此,開發人員工具會評估內建 HTML 元素中的相關存取子,以顯示這些指標。 擁有和繼承的屬性。 DevTools 會先排序自己的屬性,方便您查看。

可列舉和非列舉屬性

可列舉的屬性為彩色。非可枚舉的屬性會靜音。可枚舉和不可枚舉的屬性。 您可以使用 for … in 迴圈或 Object.keys() 方法,對可枚舉屬性進行疊代。

方法

方法會標示為 f ()方法。

如要進一步瞭解函式,請參閱如何透過「控制台檢查函式