How to find out which hidden HTML element has focus?

Question

Google Chrome

Dear Gurus please give me some advice.
I am making a website. I click Tab. I watch the focus move. At some point, the focus is NOT visible, and it is not clear where it is. How to find out at what current moment the HTML element is selected with focus?

Answer 1

Usually manually searching for a focused element does not work, because when you open the developer console, the focus on the element flies. If you focus it again with the console open, the focus flies at the moment when you switch to an already open console. So, the most suitable option: you can listen to focus events and immediately print to the log who received this focus. This code should help:

window.addEventListener('focusin', event => console.log(new Date, event.target));

If it does not display anything at the moment of focus change, then the focus has gone beyond the page - for example, to the address bar in the browser, to some icon on the panel, and so on.

Answer 2

document.querySelector('*:focus');