When you build a Single Page Application, chances are that you manage some of the focus
through script. For debugging, it can be super useful to log the currently focused element to the Dev Tools Console.
Logging the focused element
The focused element is known in the DOM as document.activeElement
, so you can just console.log()
that if you want to know what the currently focused element is.
Logging it as it changes
Thanks to Eva, I recently learned a way to log the active element as it changes:
document.addEventListener('focusin', function() {
console.log('focused: ', document.activeElement)
}, true);
The focusin
event is like focus
, but it bubbles, so when any element within document
receives focus, focusin
bubbles all the way up to document
.
When I posted this on Twitter, Christian Schaefer helpfully pointed out that, although focus
does not bubble, it can be intercepted when the capturing
flag (addEventListener
’s third argument) is set to true
. Phil Walton then added that focus
fires also for non-interactive elements and when the window
receives focus. Even better!
So this is what you could use to log the active element when it changes:
document.addEventListener('focus', function() {
console.log('focused: ', document.activeElement)
}, true);
Also relevant: PPK’s Delegating the focus and blur events, over 10 years old, in which he explains that lack of bubbling in focus
makes sense, because we would not want it to bubble to window
, as the `window’ having focus means that the user has focused the entire browser window.
Thanks to Eva on Mozilla Slack for sharing and Christian, Phil and Peter-Paul for further explaining.
Comments, likes & shares (6)
and Jake Archibald liked this
"Console logging the focused element as it changes"
(via @codepo8)
hiddedevries.nl/en/blog/2019-0…
There was a bug in some of my code recently. A skip link was not working correctly. When it was focused and enter was pressed, focus was placed on the main content. Seemed okay. But, when tab was pressed to go into the main content, the focus went off to some place I could not see! I spent a few minutes trying to figure it out but could not. Then, I searched for how to programatically find focus. I found I could log
document.activeElement
into my console to do this.You can log the document's active element in any browser console by placing a
console.log
into your JavaScript code. See the code block below for how to do this (thanks to my friend Eva for teaching me this):Below is an image showing what such a log looks like in Firefox. It shows that the first element focused when I opened the page was a
div
. When I moved focus to the light/dark mode toggle, the focused element was aninput
:In Chrome there is a live expression tool for logging the document's active element. The following two images show examples of this tool in action.
There are two things to note:
Ensuring focus is handled correctly is important for the accessibility of a web page. However, focus behaviour is not always consistent across browsers. If you're developing something and you are not sure whether focus is being handled correctly, it's a good idea to investigate by logging the document's active element.
If the element that is currently focused is removed from the DOM, the focus is moved either to the document's
body
element or becomesnull
.Resources: