Dale St. Marthe
使用「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」面板。