Chrome devtools能否专注于跟踪元素？

Question

我在可访问性方面测试我的HTML.在使用TAB键导航HTML时,焦点环有时会消失,因为隐藏了具有焦点的元素.那时我无法分辨哪个DOM元素有焦点.有没有办法我可以在Chrome DEVtools中跟踪哪些元素在浏览页面时有焦点？

Answer 1

更新

从2018年8月发布的Chrome 70开始,Live Expressions提供了一种更简单的方法来跟踪哪个元素具有焦点.

1. 打开控制台.

2. 单击创建实时表达式 .

   

3. 类型document.activeElement.

4. 单击Live Expression UI外部进行保存.

从2018年10月发布的Chrome 71开始,当您将鼠标悬停在评估为节点的Live Expression结果上时(如果是这样document.activeElement),DevTools会突出显示视口中的节点.

原始答案

谢谢发帖.看起来像一个常见且有用的工作流程,但我从未想过它.

1. 在专注于隐藏元素的同时,document.activeElement在控制台中进行评估.

   

2. 右键单击>" 在元素中显示"面板.

   

该DOM树是突出了隐藏的元素.

这是演示,如果您想自己尝试一下.

PS 我在DevTools帐户中发布了这个工作流程.