Element Focus watcher (console)

Note

This can be a useful tool for debugging tabbing order or focus traps in order to debug and design those UX.

let lastActiveElement = document.activeElement
 
setInterval(() => {
  if (document.activeElement !== lastActiveElement) {
    console.group("Element Focus Change")
    console.log("from:", lastActiveElement)
    console.log("  to:", document.activeElement)
    console.groupEnd()
    lastActiveElement = document.activeElement
  }
}, 500)
 
let lastActiveElement = document.activeElement
document.addEventListener("focusin", (e) => {
  if (document.activeElement !== lastActiveElement) {
    console.group("Element Focus Change")
    console.log("from:", lastActiveElement)
    console.log("  to:", document.activeElement)
    console.groupEnd()
    lastActiveElement = document.activeElement
  }
})

// This will log every focus change immediately
document.addEventListener("focusin", (e) => console.log("Focus IN:", e.target))
document.addEventListener("focusout", (e) => console.log("Focus OUT:", e.target))