元素面板總覽

Dale St. Marthe

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

總覽

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

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

• 樣式：

  • 查看及偵錯套用至元素的所有樣式表 CSS 規則。
  • 找出無效、遭覆寫、處於非啟用狀態或無法正常運作的 CSS。
  • 您可以新增宣告、套用類別，以及與方塊模型互動，編輯元素。
  • 使用 DOM 樹狀結構中的「徽章」存取容器編輯選項。

• 「已計算」：列出套用至元素的已解析屬性，這些屬性會由 Chrome 轉譯。

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

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

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

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

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

開啟「元素」面板

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

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

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