Show active DOM element in DevTools

By in Front-end development
onSometimes 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.
- Open the DevTools console by pressing
Cmd+Opt+J
Mac orCtrl+Shift+J
Windows / Linux - 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.