Chrome devtools可以重点跟踪元素吗？

Question

我正在测试有关辅助功能的HTML。使用TAB键浏览HTML时，聚焦环有时会消失，因为具有焦点的元素被隐藏了。在这一点上，我无法确定哪个DOM元素具有焦点。 我可以通过Chrome DEVtools跟踪在浏览页面时哪个元素具有焦点吗？

Answer 1

更新

Official documentation

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

1. 打开控制台。

2. 点击创建实时表达 。

   

3. 键入document.activeElement。

4. 在Live Expression UI外部单击以保存。

从2018年10月发布的Chrome 71开始，当您将鼠标悬停在评估为节点的Live Expression结果上时（例如document.activeElement），DevTools会在视口中突出显示该节点。 / p>

原始答案

感谢您的发布。看起来像一个通用且有用的工作流程，但我从未想过。

1. 在关注隐藏元素的同时，在控制台中评估document.activeElement。

   

2. 右键单击> 在“元素”面板中显示。

   

DOM树突出显示了隐藏的元素。

如果您想自己尝试，这里是demo。

P.S。 I tweeted out this workflow from the DevTools account。