blocks|key|2508966|text|更新|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2508967|Official+documentation|offset|length|2508968|从2018年8月发布的Chrome70开始，Live+Expressions提供了一种更简单的方式来跟踪哪个元素具有焦点。|2508969|2508970|打开控制台。|ordered-list-item|2508971|单击创建实时表达式+|style|BOLD|2508972|2508973|📷|atomic|2508974|。|2508975|2508976|​|2508977|在|2508978|+UI外部键入document.activeElement.|CODE|2508979|Click以保存|2508980|2508981|2508982|2508983|从2018年10月发布的Chrome71开始，当您将鼠标悬停在计算结果为节点的实时表达式结果上(与document.activeElement相同)时，DevTools会在视口中高亮显示该节点。|2508984|2508985|2508986|2508987|原始答案|2508988|谢谢你的帖子。这似乎是一种常见且有用的工作流程，但我从未想过它。|2508989|2508990|在关注隐藏元素的同时，在控制台中评估document.activeElement。|2508991|2508992|2508993|2508994|2508995|Right-click+>+Elements+in+Elements+panel.|2508996|2508997|2508998|2508999|DOM树将突出显示隐藏的元素。|2509000|2509001|2509002|2509003|这是demo，如果你想自己试试的话。|2509004|另注：I+tweeted+out+this+workflow+from+the+DevTools+account。|2509005|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web/tools/chrome-devtools/accessibility/focus|1|https://developers.google.com/web/updates/2018/08/devtools#watch|2|IMAGE|IMMUTABLE|imageUrl|https://i.stack.imgur.com/BFu2R.png|imageAlt|3|https://i.stack.imgur.com/bMner.png|4|https://i.stack.imgur.com/dujZu.png|5|https://i.stack.imgur.com/qw13z.png|6|https://i.stack.imgur.com/6RwFy.png|7|https://i.stack.imgur.com/9ydiK.png|8|https://a11yfocus.glitch.me/|9|https://twitter.com/ChromeDevTools/status/1022515019379077120^0|0|0|M|0|0|M|G|1|0|0|0|2|7|0|0|0|1|2|0|0|0|1|3|0|0|0|7|M|0|1|1|0|0|1D|M|0|0|0|1|4|0|0|0|0|0|I|M|0|0|0|1|5|0|0|0|D|R|0|0|0|1|6|0|0|0|4|0|0|0|1|7|0|0|2|4|8|0|3|1H|9|0^^$0|@$1|2|3|4|5|6|7|2W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|2X|8|@]|9|@$D|2Y|E|2Z|1|30]]|A|$]]|$1|F|3|G|5|6|7|31|8|@]|9|@$D|32|E|33|1|34]]|A|$]]|$1|H|3|-4|5|6|7|35|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|36|8|@]|9|@]|A|$]]|$1|L|3|M|5|K|7|37|8|@$D|38|E|39|N|O]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|3A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|3B|8|@]|9|@$D|3C|E|3D|1|3E]]|A|$]]|$1|T|3|U|5|6|7|3F|8|@]|9|@]|A|$]]|$1|V|3|R|5|S|7|3G|8|@]|9|@$D|3H|E|3I|1|3J]]|A|$]]|$1|W|3|X|5|6|7|3K|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|3L|8|@]|9|@]|A|$]]|$1|10|3|11|5|K|7|3M|8|@$D|3N|E|3O|N|12]]|9|@]|A|$]]|$1|13|3|14|5|K|7|3P|8|@]|9|@]|A|$]]|$1|15|3|U|5|K|7|3Q|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|3R|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|3S|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|3T|8|@$D|3U|E|3V|N|12]]|9|@]|A|$]]|$1|1A|3|X|5|6|7|3W|8|@]|9|@]|A|$]]|$1|1B|3|R|5|S|7|3X|8|@]|9|@$D|3Y|E|3Z|1|40]]|A|$]]|$1|1C|3|X|5|6|7|41|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|6|7|42|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|43|8|@]|9|@]|A|$]]|$1|1H|3|-4|5|6|7|44|8|@]|9|@]|A|$]]|$1|1I|3|1J|5|K|7|45|8|@$D|46|E|47|N|12]]|9|@]|A|$]]|$1|1K|3|-4|5|6|7|48|8|@]|9|@]|A|$]]|$1|1L|3|R|5|S|7|49|8|@]|9|@$D|4A|E|4B|1|4C]]|A|$]]|$1|1M|3|X|5|6|7|4D|8|@]|9|@]|A|$]]|$1|1N|3|-4|5|6|7|4E|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|K|7|4F|8|@$D|4G|E|4H|N|O]]|9|@]|A|$]]|$1|1Q|3|-4|5|6|7|4I|8|@]|9|@]|A|$]]|$1|1R|3|R|5|S|7|4J|8|@]|9|@$D|4K|E|4L|1|4M]]|A|$]]|$1|1S|3|X|5|6|7|4N|8|@]|9|@]|A|$]]|$1|1T|3|1U|5|6|7|4O|8|@$D|4P|E|4Q|N|O]]|9|@]|A|$]]|$1|1V|3|X|5|6|7|4R|8|@]|9|@]|A|$]]|$1|1W|3|R|5|S|7|4S|8|@]|9|@$D|4T|E|4U|1|4V]]|A|$]]|$1|1X|3|X|5|6|7|4W|8|@]|9|@]|A|$]]|$1|1Y|3|1Z|5|6|7|4X|8|@]|9|@$D|4Y|E|4Z|1|50]]|A|$]]|$1|20|3|21|5|6|7|51|8|@]|9|@$D|52|E|53|1|54]]|A|$]]|$1|22|3|-4|5|6|7|55|8|@]|9|@]|A|$]]]|23|$24|$5|25|26|27|A|$28|29]]|2A|$5|25|26|27|A|$28|2B]]|2C|$5|2D|26|2E|A|$2F|2G|2H|-4]]|2I|$5|2D|26|2E|A|$2F|2J|2H|-4]]|2K|$5|2D|26|2E|A|$2F|2L|2H|-4]]|2M|$5|2D|26|2E|A|$2F|2N|2H|-4]]|2O|$5|2D|26|2E|A|$2F|2P|2H|-4]]|2Q|$5|2D|26|2E|A|$2F|2R|2H|-4]]|2S|$5|25|26|27|A|$28|2T]]|2U|$5|25|26|27|A|$28|2V]]]]

<h1>Update</h1>

<a href="https://developers.google.com/web/tools/chrome-devtools/accessibility/focus" rel="noreferrer">Official documentation</a>

As of Chrome 70, which released in August 2018, <a href="https://developers.google.com/web/updates/2018/08/devtools#watch" rel="noreferrer">Live Expressions</a> provide an easier way to track which element has focus.

<ol>
<li>Open the Console.</li>
<li>Click Create Live Expression <a href="https://i.stack.imgur.com/BFu2R.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BFu2R.png" alt="Create Live Expression"></a>.

<a href="https://i.stack.imgur.com/bMner.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bMner.png" alt="Live Expression UI"></a></li>
<li>Type <code>document.activeElement</code>.</li>
<li>Click outside of the Live Expression UI to save.</li>
</ol>

As of Chrome 71, which was released in October 2018, when you hover over a Live Expression result that evaluates to a node (as is the case with <code>document.activeElement</code>), DevTools highlights the node in the viewport.

<a href="https://i.stack.imgur.com/dujZu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dujZu.png" alt="Hovering over the Live Expression result"></a>

<h1>Original Answer</h1>

Thanks for posting. Seems like a common and useful workflow, yet I've never thought about it.

<ol>
<li>While focused on the hidden element, evaluate <code>document.activeElement</code> in the Console.

<a href="https://i.stack.imgur.com/qw13z.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qw13z.png" alt="Running document.activeElement in the Console."></a></li>
<li>Right-click > Reveal in Elements panel.

<a href="https://i.stack.imgur.com/6RwFy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6RwFy.png" alt="Hovering over &quot;Reveal in Elements panel&quot;."></a></li>
</ol>

The DOM Tree is highlighting the hidden element.

<a href="https://i.stack.imgur.com/9ydiK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9ydiK.png" alt="The hidden element is highlighted in the Elements panel."></a>

Here is the <a href="https://a11yfocus.glitch.me/" rel="noreferrer">demo</a>, if you'd like to try it yourself.

P.S. <a href="https://twitter.com/ChromeDevTools/status/1022515019379077120" rel="noreferrer">I tweeted out this workflow from the DevTools account</a>.

I'm testing my HTML on accessibility. While navigating the HTML with the TAB key, the focus ring sometimes disappears because the element that has focus is hidden. At that point i can't tell which DOM element has focus.
Is there a way i can track in Chrome DEVtools which element has focus while TABbing through the page?

Can Chrome devtools track element with focus?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

Chrome devtools可以跟踪具有焦点的元素吗？-腾讯云开发者社区-腾讯云

问Chrome devtools可以跟踪具有焦点的元素吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chrome devtools可以跟踪具有焦点的元素吗？EN