highlight the focused element in web development

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

   

3. Type document.activeElement

   

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

   

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