highlight the focused element in web development



~1 min read


98 words

When testing a website for its accessibility, one thing I’m often interested in looking at is what is in focus.

The browser of course needs to track this. Chrome makes it easy to surface this with “Live Expressions”.

The steps are straightforward:

  1. Open the console (Cmd + Shift + J)

  2. Click on the eye to open the Expression window

    Open Live Expressions

  3. Type document.activeElement

    Add Live Expressions

  4. Click or tab within the browser UI to see which element is active

    See live Expressions

I originally found this solution on Google’s Developer site.

Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!