google-chrome-devtools - Chrome devtools 可以跟踪焦点元素吗？

Question

我正在测试我的 HTML 的可访问性。在使用 TAB 键导航 HTML 时，焦点环有时会消失，因为具有焦点的元素被隐藏了。那时我不知道哪个 DOM 元素有焦点。
有没有一种方法可以在 Chrome DEVtools 中跟踪哪个元素在浏览页面时具有焦点？

Answer 1

更新

Official documentation

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

打开控制台。

点击创建实时表达 .

输入 document.activeElement .

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

从 2018 年 10 月发布的 Chrome 71 开始，当您将鼠标悬停在计算为节点的实时表达式结果上时(如 document.activeElement 的情况)，DevTools 会在视口(viewport)中突出显示该节点。



原始答案

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

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

右键 > 在元素面板中显示 .

DOM 树 正在突出隐藏的元素。



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

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