Use Chrome Devtools to debug the current active DOM element

Juri Strumpflohner: [0:00] Having good accessibility in our application is important, especially for the new modern JavaScript heavy web apps.

[0:06] Unfortunately, many times developers don't really pay a lot of attention to it, but today I'd like to focus very quickly on a small neat trick in Chrome DevTools to highlight you which is the currently active element. This is especially useful when you use keyboard navigation. Let's see.

[0:22] This is totally made-up simple web page. It has a couple of headers, a paragraph in our header, a little form and a couple of things here. As you can already see, if I click into that page, and I do tap navigation, you can see how I can basically tap through that page.

[0:37] That's important, especially for screen readers, in order to be able to follow your screen, but even for users that don't have any accessibility issues, because you are much faster in using the web app, right?

[0:48] Here you can clearly see how the current focused element is highlighted, and that's also best practice to be able to see that immediately. Many times, for some weird styles that you have in your application, you might not clearly see what is the current focus. Or, you're even debugging where your focus went because you don't see it anymore.

[1:07] One example, for instance, is that you might have on some arbitrary element, let's say on the input there, whenever is focused, you have the outline deactivated for whatever reason. In that case, if I step in here, you don't see any more where the focus has gone.

[1:25] Similarly, what if, for instance, you have some link in here that is hidden, so your style broke, and it got a width of 1 pixel, height 1 pixel, so it's really, really tiny. We don't even add any text. We cannot see the link, although it is there in your DOM.

[1:46] Even here, the same thing. If I now navigate through those pieces, you can see I'm on a button, I'd click/tap, the tap kind of disappears. I don't see any element being highlighted and then, the next link, the website, is being highlighted.

[2:01] You might run into a lot of those kind of debugging issues when you try to make your website more accessible.

[2:06] In Chrome DevTools, there's a neat little trick which you can use. If you go to the console in the DevTools and you write document.activeElement, you get the current element on the DOM that has the focus. Right now, it's the body. If I go, for instance, to our input box here and again do activeElement, you can see how it prints outs properly that input type text.

[2:27] The console here has a neat feature, which are these Create live expressions here. If you click there, you can enter here an expression that gets continuously evaluated by the DevTools. It's kind of the watch statements you might use when you're debugging the source code.

[2:41] We can add that document.activeElement in here and I can see it focus on input#firstname, and now if I click up here and I navigate through, you can see it now becomes a button, and now becomes our magical link which is kind of hidden, which we don't see.

[2:56] You can hover and you see where it is in your document. You can try to debug it. That goes ahead to this one, goes again to the body and you can navigate through.

[3:05] This is a really neat feature. It cannot only help you here for debugging for instance those focus elements, but it can create here a lot of different live expressions that might be helpful when you debug your application.