If I want to debug standard DOM events, the browser dev tools make it easy to have Event Listener Breakpoints.
But now I need to debug custom events that are created with CustomEvent("foobar-happened") and dispatched with dispatchEvent(…). I don't see those in the browser devtools. How can I inspect such custom events?
No, I cannot (or should not) add debugger statements to the code that dispatches those events. Such code is coming from outside my project (e.g. from a third-party library, or code from another team), and it may be unfeasible for me to find all the places to add such debugger statements.
There is at least no simple way built into the DevTools to stop at listeners for custom events.
Therefore, I now created a request for that for the Chrome DevTools as well as one for the Firefox DevTools.
The only thing you can do at the moment is search for addEventListener(...) occurrences for a specific event throughout the code within the DevTools and manually add a breakpoint in the Sources or Debugger panel.