跟踪元素焦点

假设您要测试网页的键盘导航无障碍功能。使用 Tab 键导航页面时,焦点环有时会消失,因为具有焦点的元素被隐藏了。如需在开发者工具中跟踪聚焦的元素,请执行以下操作:

  1. 打开控制台
  2. 点击创建实时表达式 创建实时表达式

    创建实时表达式。

    如需了解详情,请参阅使用实时表达式实时监控 JavaScript 值

  3. 输入 document.activeElement

  4. 点击实时表达式界面以外的位置进行保存。

您在 document.activeElement 下方看到的值是表达式的结果。由于该表达式始终表示获得焦点的元素,因此您现在可以始终跟踪哪个元素获得焦点。

  • 将鼠标悬停在结果上,即可在视口中突出显示聚焦的元素。
  • 右键点击结果,然后选择 Reveal in Elements,即可在 Elements 面板的 DOM 树中显示相应元素。
  • 右键点击结果,然后选择存储为全局变量,以创建对可在控制台中使用的节点的变量引用。