元素面板總覽

Dale St. Marthe

使用「Elements」面板檢查及編輯 DOM 元素。

總覽

「Elements」面板會提供強大的介面，協助您檢查及操控 DOM。您可以使用類似於 HTML 文件的 DOM 樹狀結構選取特定 DOM 節點，並用其他工具修改。

「元素」面板還有下列內含相關工具的分頁：

• 樣式：

  • 查看及偵錯套用至所有樣式表中元素的 CSS 規則。
  • 找出無效、覆寫、停用或其他未正常運作的 CSS。
  • 如要編輯元素，請新增宣告、套用類別，以及與 Box 模型互動。
  • 使用 DOM 樹狀結構中具有徽章的容器編輯選項。

• 運算：套用至元素在 Chrome 算繪時的清單解析屬性。

• 版面配置：包含修改格線和 flexbox 疊加層的選項。

• 事件監聽器：列出所有事件監聽器及其屬性。可讓您找出事件監聽器的來源和被動或封鎖事件監聽器。

• DOM 中斷點：列出在「元素」面板中新增的 DOM 變更中斷點，並可讓您啟用、停用、移除或顯示中斷點。

• 屬性：選取 DOM 節點來檢查及排序物件的自有屬性。

• 無障礙功能：列出具有 ARIA 標籤及其屬性的元素。可讓您切換及檢查無障礙功能樹狀結構 (實驗功能)。

開啟「元素」面板

根據預設，當您開啟開發人員工具時，「元素」面板會隨即開啟。您也可以檢查網頁上任何位置的節點，自動開啟「元素」面板。

如何手動開啟「元素」面板：

1. 開啟開發人員工具。
2. 按下以下指令開啟「Command」選單：
   • macOS：Command + Shift + P 鍵
   • Windows、Linux、ChromeOS：Control + Shift + P 鍵
3. 開始輸入 Elements，然後選取「Show Elements」，然後按下 Enter 鍵。開發人員工具會在開發人員工具視窗底部的「導覽匣」中顯示「Elements」面板。