Show active DOM element in DevTools

Sometimes you find yourself trying to identify a weird bug in a piece of UI and often DevTools comes to the rescue to help you out.

I was experiencing an issue this week where a UI element wouldn’t click and get focus without pressing it twice, it only occurred in a particular scenario and it was getting frustrating.

Using DevTools and particularly the console I was able to track down the element that was getting focus and preventing my UI component from being clicked first time by using the activeElement JavaScript property.

1. Open the DevTools console by pressing Cmd+Opt+J Mac or Ctrl+Shift+J Windows / Linux
2. Typing the following property in the console will return the current active DOM element.

document.activeElement

By using this simple property I could track down the offending component and fix the issue.