Track element focus
Stay organized with collections
Save and categorize content based on your preferences.
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.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2018-12-14 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
{"lastModified": "Last updated 2018-12-14 UTC."}
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2018-12-14 UTC."],[],[]]