追蹤元素焦點
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
假設您正在測試網頁的鍵盤導覽無障礙功能。使用 Tab 鍵瀏覽頁面時,由於含有焦點的元素處於隱藏狀態,焦點環有時會消失。如何在開發人員工具中追蹤焦點元素:
- 開啟控制台。
按一下「Create Live Expression」圖示 。
如需詳細資訊,請參閱「使用即時運算式監控 JavaScript 值」。
輸入 document.activeElement
。
按一下「Live Expression」(即時運算式) UI 以外的位置來儲存。
您在 document.activeElement
下方看到的值是運算式的結果。因為這個運算式始終代表聚焦的元素,因此您現在可以隨時追蹤聚焦的元素為何。
- 將滑鼠遊標懸停在結果上,即可醒目顯示可視區域中目前焦點的元素。
- 在結果上按一下滑鼠右鍵,然後選取「Showal in Elements Panel」(在元素面板中顯示),即可在「Elements」(元素) 面板的「DOM 樹狀結構」中顯示元素。
- 在結果上按一下滑鼠右鍵,然後選取「Store as 全域變數」,建立可用於主控台的節點變數參照。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2018-12-14 (世界標準時間)。
[{
"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":"其他"
}]