使用「Elements」面板檢查和編輯 DOM 元素。
總覽
「Elements」面板提供強大的介面,可用來檢查和操控 DOM。您可以使用類似 HTML 文件的 DOM 樹狀結構來選取特定 DOM 節點,並使用其他工具加以修改。
「Elements」面板也包含下列分頁,列出相關工具:
樣式:
- 檢視所有樣式表中已套用到某個元素的 CSS 規則並進行偵錯。
- 找出所有無效、覆寫、停用或其他無法正常運作的 CSS。
- 如要編輯元素,請新增宣告、套用類別,並與 Box 模型互動。
- 使用 DOM 樹狀結構中的「徽章」存取容器編輯選項。
計算:列出已解析的屬性,在 Chrome 轉譯時套用至元素。
事件監聽器:列出所有事件監聽器及其屬性。可讓您找出事件監聽器的來源,以及篩選被動或封鎖的事件監聽器。
DOM 中斷點:列出透過「元素」面板新增的 DOM 變更中斷點,可讓您啟用、停用、移除或顯示這些中斷點。
屬性:選取要檢查的 DOM 節點,並排序物件的擁有和繼承屬性。
無障礙功能:列出含有 ARIA 標籤及其屬性的元素。可讓您切換及檢查無障礙功能樹狀結構 (實驗功能)。
開啟「元素」面板
根據預設,當您開啟開發人員工具時,「元素」面板就會開啟。您也可以在頁面中任一處檢查節點,即可自動開啟「元素」面板。
如何手動開啟「Elements」面板:
- 開啟開發人員工具。
- 按下以下按鍵開啟「指令選單」:
- macOS:Command + Shift + P 鍵
- Windows、Linux、ChromeOS:Control + Shift + P 鍵
- 開始輸入
Elements
,選取「顯示元素」,然後按下 Enter 鍵。開發人員工具會在開發人員工具視窗底部的「Drawer」中顯示「Elements」面板。