檢查模式：快速分析元素屬性

Dale St. Marthe

使用檢查模式，專注於網頁上的特定元素並加以分析。

總覽

啟用開發人員工具的「檢查模式」 (選取器挑選器) 後，您可以將滑鼠游標懸停在網頁元素上，並查看樣式和無障礙資訊。在啟用檢查模式時按一下元素，系統會在「元素」面板 DOM 樹狀結構中醒目顯示相對應的 DOM 元素，並在「樣式」分頁中列出相關樣式。

啟用檢查模式

如要啟用檢查模式：

1. 開啟 DevTools
2. 按一下動作列中的「檢查模式」按鈕。

當「檢查模式」圖示為藍色時，選取器挑選器就會處於啟用狀態。

您也可以在 Chrome 中使用捷徑，在檢查模式中開啟「元素」面板。按下下列任一按鈕：

• macOS：Cmd + Option + C 鍵
• Windows、Linux 和 ChromeOS：Ctrl + Shift + C 鍵

使用檢查模式查看樣式和無障礙資訊

啟用檢查模式後，將滑鼠游標懸停在頁面元素上，系統就會醒目顯示元素並顯示工具提示重疊。「Elements」面板會自動展開 DOM 樹狀圖，醒目顯示您游標所在的元素。

視元素而定，檢查模式工具提示會顯示下列樣式屬性：

• 元素的選取器。
• 元素的尺寸 (以像素為單位)。
• 元素的背景顏色。
• 元素的文字顏色。
• 元素的字型屬性。
• 元素的邊框間距，以像素為單位。
• 元素的邊界，以像素為單位。

此外，使用 CSS 格線或 CSS 彈性容器的元素，其名稱旁邊會顯示不同的圖示。

工具提示的無障礙功能部分會顯示下列資訊：

• 向輔助技術回報的元素名稱和角色。
• 元素是否可透過鍵盤聚焦。

當滑鼠游標懸停在文字標題上時，系統會顯示對比度比率，用來評估前景 (文字顏色) 和背景色彩之間的亮度差異。

良好的對比度是讓文字易讀的關鍵。瞭解如何修正對比度偏低的文字。

保留及隱藏檢查模式工具提示

如要在保留檢查模式工具提示的同時，將滑鼠游標移至其他位置，請按住：

• macOS：Ctrl+Option 鍵
• Windows、Linux 和 ChromeOS：Ctrl + Alt 鍵

如要在移動滑鼠游標時暫時隱藏檢查工具提示，請按住 Ctrl 鍵。

檢查無法存取的元素

檢查模式一開始無法指定具有 CSS 屬性 pointer-events: none; 的元素。

如要檢查無法存取的元素，請將滑鼠游標懸停在元素上，然後按下 Shift 鍵。