Suppose that you're testing the keyboard navigation accessibility of a page. When navigating the
page with the
Tab
key, the focus ring sometimes disappears because the element that has
focus is hidden. To track the focused element in DevTools:
- Open the
Console
.
Click
Create Live Expression
.
For more information, see
Watch JavaScript values in real-time with Live Expressions
.
Type
document.activeElement
.
Click outside of the
Live Expression
UI to save.
The value that you see below
document.activeElement
is the result of the expression. Since that
expression always represents the focused element, you now have a way to always keep track of which
element has focus.
- Hover over the result to highlight the focused element in the viewport.
- Right-click the result and select
Reveal in Elements panel
to show the element in the
DOM
Tree
on the
Elements
panel.
- Right-click the result and select
Store as global variable
to create a variable reference to
the node that you can use in the
Console
.