Console logging the focused element as it changes

Published 2019-01-30 notes

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

Chris Heilmann wrote on 30 January 2019:
Console logging the focused element as it changes hiddedevries.nl/en/blog/2019-0…
Andréia Bohner wrote on 30 January 2019:
Just what I'm looking for:

"Console logging the focused element as it changes"
(via @codepo8)

hiddedevries.nl/en/blog/2019-0…
Jeremy Keith wrote on 17 June 2020:

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):

document.addEventListener('focusin', function() {
  console.log('focused: ', document.activeElement)
}, true);

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 an input:

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:

  1. 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.

  2. If the element that is currently focused is removed from the DOM, the focus is moved either to the document's body element or becomes null.

Resources:

Andrew.FML wrote on 15 February 2022:
This method of debugging radix focus issues has been great! So simple too hiddedevries.nl/en/blog/2019-0…
Hidde wrote on 13 July 2022:
and probably also this one hidde.blog/console-loggin…