Can Chrome devtools track element with focus?

Question

I'm testing my HTML on accessibility. While navigating the HTML with the TAB key, the focus ring sometimes disappears because the element that has focus is hidden. At that point i can't tell which DOM element has focus. Is there a way i can track in Chrome DEVtools which element has focus while TABbing through the page?

Answer 1

Update

Official documentation

As of Chrome 70, which released in August 2018, Live Expressions provide an easier way to track which element has focus.

1. Open the Console.

2. Click Create Live Expression .

   

3. Type document.activeElement.

4. Click outside of the Live Expression UI to save.

As of Chrome 71, which was released in October 2018, when you hover over a Live Expression result that evaluates to a node (as is the case with document.activeElement), DevTools highlights the node in the viewport.

Original Answer

Thanks for posting. Seems like a common and useful workflow, yet I've never thought about it.

1. While focused on the hidden element, evaluate document.activeElement in the Console.

   

2. Right-click > Reveal in Elements panel.

   

The DOM Tree is highlighting the hidden element.

Here is the demo, if you'd like to try it yourself.

P.S. I tweeted out this workflow from the DevTools account.