Using DevTools Event Listener Breakpoints to Trace Elusive UI Bugs

A developer describes debugging a web app where a menu click caused unexpected modal behavior, with no console errors and handlers scattered across dynamic and third-party code. Regular breakpoints and logging proved ineffective because the relevant event handlers were hard to locate. The author turned to Chrome DevTools' event listener breakpoints, which pause execution whenever a chosen event type's listener is invoked, regardless of where the handler lives. The feature is found in the Sources panel's sidebar, organized by event category with a filter for quick lookup. In one case involving a hover tooltip, setting breakpoints on mouseenter and mouseleave revealed a cleanup timer that was never cleared, explaining the lingering tooltip. The article recommends combining this technique with call stack inspection to understand event propagation.