元素面板總覽

Dale St. Marthe

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

總覽

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

「Elements」面板也包含下列含有相關工具的分頁：

• 樣式：

  • 查看及偵錯：從所有樣式表套用至元素的 CSS 規則。
  • 找出任何無效、已覆寫、未啟用或其他 CSS，這些 CSS 無法正常運作。
  • 您可以新增宣告、套用類別，以及與Box 模型互動，來編輯元素。
  • 使用 DOM 樹狀結構中的徽章存取容器編輯選項。

• Computed：列出 Chrome 在轉譯元素時，套用至該元素的已解析屬性。

• 「Layout」：包含用於修改格線和Flexbox疊加層的選項。

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

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

• 屬性：選取 DOM 節點，檢查並排序物件的自身和繼承屬性。

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

開啟「元素」面板

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

如要手動開啟「元素」面板，請按照下列步驟操作：

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