Track which element has focus
Suppose that you are 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.
Choose Create live expression ().
To save the expression, select outside of the live expression.
The value displayed 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 on the result to highlight the focused element in the viewport.
- Hover on the result, open the contextual menu (right-click), and choose Reveal in Elements panel to show the element in the DOM Tree on the Elements tool.
- Hover on the result, open the contextual menu (right-click), and choose Store as global variable to create a variable reference to the node that you are able to use in the Console.
Getting in touch with the Microsoft Edge DevTools team
Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.
- Send your feedback using the Send Feedback icon or select
I(Windows, Linux) or
I(macOS) in DevTools.
- Tweet at @EdgeDevTools.
- Submit a suggestion to The Web We Want.
- To file bugs about this article, use the following Feedback section.
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
This work is licensed under a Creative Commons Attribution 4.0 International License.