Sofia Emelianova
使用「元素」>「屬性」分頁可瀏覽及篩選 DOM 物件的屬性。
開啟「屬性」分頁
如要開啟「Properties」分頁，請按照下列步驟操作：
- 開啟開發人員工具。根據預設，「元素」面板會隨即開啟。
- 在 DOM 樹狀結構中選取節點。
- 開啟「屬性」分頁。如果沒有看到分頁，請按一下「更多」圖示 ，然後從下拉式選單中選取。
Spot 本身的屬性
「屬性」分頁會以粗體顯示並排序物件的自己的屬性。
找出繼承屬性的來源
「Properties」分頁會評估內建元素的存取工具，並以「繼承」和一般字型顯示在物件上。
如要找出繼承屬性的來源，請展開物件、其 [[Prototype]]、巢狀 [[Prototype]]，依此類推。
在這個範例中，在原型鏈中找出原始屬性 (粗體) 以及對應的 getter，即可追蹤繼承自 size 屬性的來源。
此外，專屬於原型的屬性只會顯示在原型上，不會顯示在物件上。以便輕鬆診斷物件。
篩選資源
如要快速尋找屬性，請在 [篩選器] 輸入方塊中輸入其名稱或值。
顯示所有房源
根據預設，「Properties」分頁不會顯示含有 null 和 undefined 值的屬性。
如要查看所有屬性，請勾選「全部顯示」。
瞭解屬性
元素 >「屬性」分頁會顯示多種屬性。
簡易屬性
簡易屬性為 <name>: <value> 的組合。
物件和陣列
可摺疊 () 屬性是物件 {} 或陣列 []。
如要進一步瞭解如何檢查 JavaScript 物件，請參閱「檢查物件屬性」。
與 DOM 節點對應的屬性
對應至 DOM 節點的屬性是連結。按一下連結，即可在 DOM 樹狀結構中選取相關節點。
擁有和沿用的資源
粗體字的屬性是物件的屬性。這些是在物件上直接定義。
一般字型的屬性沿用自原型鏈。因此，開發人員工具會評估內建 HTML 元素中的相關存取子，以顯示這些指標。
DevTools 會先排序自己的屬性，方便您查看。
可列舉和非列舉屬性
可列舉的屬性為彩色。非可枚舉的屬性會靜音。
您可以使用 for … in 迴圈或 Object.keys() 方法，對可枚舉屬性進行疊代。
方法
方法會標示為 f ()。
如要進一步瞭解函式，請參閱如何透過「控制台」檢查函式。