依序前往「Elements」(元素) >「Properties」(屬性) 窗格,即可瀏覽及篩選 DOM 物件的屬性。
開啟「屬性」窗格
如要開啟「屬性」窗格,請按照下列步驟操作:
- 開啟開發人員工具。根據預設,「元素」面板會隨即開啟。
- 在 DOM 樹狀結構中選取節點。
- 開啟「屬性」分頁。如果沒有看到這個分頁,請按一下「更多」圖示 ,然後在下拉式選單中選取所需分頁。
尋找自有房源
「Properties」窗格會先以粗體顯示物件的自己的屬性,並顯示該物件。
找出繼承資源的來源
「Properties」窗格會評估內建元素的存取子,並在物件上顯示為「繼承」和一般字型。
如要找出繼承屬性的來源,請展開物件,然後展開其 [[Prototype]]
,然後是巢狀的 [[Prototype]]
等。
在這個範例中,您可以在原型鏈結中找出原始屬性 (粗體) 屬性,同時找到對應的 getter,以追蹤繼承的 size
屬性的來源。
此外,原型專屬屬性只會顯示在原型上,不會顯示在物件上。這樣就能更輕鬆地診斷物件。
篩選資源
如要快速尋找屬性,請在「篩選器」文字方塊中輸入屬性名稱或值。
顯示所有房源
根據預設,「Properties」窗格不會顯示含有 null
和 undefined
值的屬性。
如要查看所有屬性,請勾選「顯示全部」。
瞭解屬性
「Elements」(元素) >「Properties」(屬性) 窗格會顯示各種屬性。
簡易屬性
簡易屬性為 <name>: <value>
的組合。
物件和陣列
可收合 () 屬性為物件 {}
或陣列 []
。
如要進一步瞭解如何檢查 JavaScript 物件,請參閱「檢查物件屬性」。
與 DOM 節點對應的屬性
與 DOM 節點相對應的屬性就是連結。請點選連結,在 DOM 樹狀結構中選取相關節點。
擁有和繼承的屬性
粗體字型的屬性是物件本身的屬性。而是直接在物件上定義。
一般字型的屬性會沿用原型鏈結。開發人員工具會在內建 HTML 元素上評估相關存取子,以便向你說明。 開發人員工具會先將屬性排序,以便找出屬性。
列舉及非列舉的屬性
可列舉的屬性為亮色。系統會忽略非列舉的屬性。
您可以使用 for … in
迴圈或 Object.keys()
方法,疊代可列舉的屬性。
方法
方法會標上 f ()
。
如要進一步瞭解函式,請前往主控台參閱「檢查函式」一文。