Overview Open Chrome DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

Track element focus

Published on

Suppose that you're testing the keyboard navigation accessibility of a page. When navigating the page with the Tab key, the focus ring sometimes disappears because the element that has focus is hidden. To track the focused element in DevTools:

  1. Open the Console.

  2. Click Create Live Expression Create Live Expression.

    Creating a Live Expression.

    Figure 1. Creating a Live Expression.

  3. Type document.activeElement.

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

The value that you see below document.activeElement is the result of the expression. Since that expression always represents the focused element, you now have a way to always keep track of which element has focus.

  • Hover over the result to highlight the focused element in the viewport.
  • Right-click the result and select Reveal in Elements panel to show the element in the DOM Tree on the Elements panel.
  • Right-click the result and select Store as global variable to create a variable reference to the node that you can use in the Console.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.