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 开始，当您将鼠标悬停在计算结果为节点的实时表达式结果上时（与 document.activeElement 一样），DevTools 会在视口中突出显示该节点。

原答案

感谢您的发帖。似乎是一个常见且有用的工作流程，但我从未想过它。

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

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

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

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

附： I tweeted out this workflow from the DevTools account.