跟踪元素焦点
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
假设您要测试网页的键盘导航无障碍功能。使用 Tab 键导航页面时,焦点环有时会消失,因为具有焦点的元素被隐藏了。如需在开发者工具中跟踪聚焦的元素,请执行以下操作:
- 打开控制台。
点击创建实时表达式
。
![创建实时表达式。](https://developer.chrome.com/static/docs/devtools/accessibility/focus/image/creating-live-expression-718a18e25e5d3.png?authuser=002&hl=zh-cn)
如需了解详情,请参阅使用实时表达式实时监控 JavaScript 值。
输入 document.activeElement
。
点击实时表达式界面以外的位置进行保存。
您在 document.activeElement
下方看到的值是表达式的结果。由于该表达式始终表示获得焦点的元素,因此您现在可以始终跟踪哪个元素获得焦点。
- 将鼠标悬停在结果上,即可在视口中突出显示聚焦的元素。
- 右键点击结果,然后选择 Reveal in Elements,即可在 Elements 面板的 DOM 树中显示相应元素。
- 右键点击结果,然后选择存储为全局变量,以创建对可在控制台中使用的节点的变量引用。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):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":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2018-12-14\u3002"}