Fatal编程技术网

Google chrome devtools Chrome devtools可以用焦点跟踪元素吗？

google-chrome-devtools

Google chrome devtools Chrome devtools可以用焦点跟踪元素吗？,google-chrome-devtools,Google Chrome Devtools,我正在测试我的HTML的可访问性。在使用TAB键浏览HTML时，焦点环有时会消失，因为具有焦点的元素被隐藏。在这一点上，我不知道哪个DOM元素有焦点。 有没有一种方法可以在Chrome DEVtools中跟踪在页面切换时哪个元素具有焦点？Update 截至2018年8月发布的Chrome 70，它提供了一种更简单的方法来跟踪哪个元素具有焦点 打开控制台 单击创建Live Expression 键入document.activeElement 在Live Expression UI外部单击以保

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

Update

截至2018年8月发布的Chrome 70，它提供了一种更简单的方法来跟踪哪个元素具有焦点

  • 打开控制台
  • 单击创建Live Expression

  • 键入
    document.activeElement

  • 在Live Expression UI外部单击以保存
    • 从2018年10月发布的Chrome 71开始，当您将鼠标悬停在计算结果为节点的Live Expression结果上时（与
    document.activeElement
    的情况相同），DevTools会在视口中高亮显示该节点

    原始答案 谢谢你的发帖。这似乎是一个常见且有用的工作流，但我从未想过它

  • 在关注隐藏元素的同时，在控制台中计算
    document.activeElement

  • 右键单击>在元素面板中显示

    • DOM树高亮显示隐藏的元素

    如果你想自己试一试的话，这是你的建议

    另外

    也可以将
    document.activeElement
    添加到“Live Expression”@MariuszPawelski感谢ping。我更新了我的答案，加入了Live Expression工作流。从Chrome 70开始，Live Expressions提供了一种简单的方法。请看我答案中的答案。