檢查模式:快速分析元素屬性
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
使用檢查模式即可聚焦及分析網頁上的特定元素。
總覽
啟用開發人員工具「檢查模式」 (選取器挑選器) 後,即可將遊標懸停在網頁上的元素上,並查看樣式和無障礙資訊。在「檢查模式」啟用的情況下點選元素,系統會醒目顯示「元素」面板 DOM 樹狀結構中相應的 DOM 元素,然後在「樣式」分頁中列出相關樣式。
啟用檢查模式
如要啟用「檢查模式」,請按照下列步驟操作:
- 開啟「開發人員工具」DevTools
- 按一下動作列中的「檢查模式」按鈕。
如果「檢查模式」圖示呈現藍色,就表示選取工具選擇器已啟用。
您也可以使用 Chrome 捷徑,在「檢查模式」中開啟「元素」面板。請按以下任一選項:
- macOS:Cmd + Option + C 鍵
- Windows、Linux、ChromeOS:Ctrl + Shift + C 鍵
啟用「檢查模式」後,只要將遊標懸停在網頁上的元素上,系統就會醒目顯示該元素,並顯示工具提示重疊。「元素」面板會自動展開 DOM 樹狀結構,醒目顯示遊標懸停的元素。
視元素而定,「檢查模式」工具提示會顯示下列樣式屬性:
- 元素的選取器。
- 元素的尺寸,以像素為單位。
- 元素的背景顏色。
- 元素的文字顏色。
- 元素的字型屬性。
- 元素的邊框間距 (以像素為單位)。
- 元素的邊界 (以像素為單位)。
此外,使用 CSS 格線或 CSS Flexbox 元素的元素名稱旁會顯示不同的圖示。
工具提示的「無障礙」部分會顯示下列資訊:
- 回報為輔助技術的元素名稱和角色。
- 該元素是否可透過鍵盤聚焦。
只要將遊標懸停在文字標題上,系統就會顯示對比度,藉此測量前景 (文字色彩) 和背景顏色之間的亮度差異。
良好的對比度是可閱讀文字的關鍵。瞭解如何修正低對比文字。
如要保留「檢查模式」工具提示,同時將滑鼠指標移至其他位置,請按住:
- macOS:Ctrl + Option 鍵
- Windows、Linux、ChromeOS:Ctrl + Alt 鍵
如要在移動滑鼠遊標時暫時隱藏檢查工具提示,請按住 Ctrl 鍵。
檢查無法存取的元素
具有 CSS 屬性 pointer-events: none;
的元素一開始無法透過檢查模式指定。
如要檢查無法存取的元素,請在將滑鼠遊標懸停在元素上時按下 Shift 鍵。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2024-06-29 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2024-06-29 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-06-29 (世界標準時間)。"],[],[]]