Starting with Firefox 69, debugging an application that includes event handlers is simplified because the debugger now includes the ability to automatically break when the code hits an event handler. This article explains how to use it.
Using a standard event breakpoint
To break when event listeners are hit, check the boxes next the events you are interested in.
When execution paused, the source pane now shows the code that it is paused on highlighted. In addition, you get a box overlaid on the viewport saying Paused on event breakpoint, with buttons to step over or resume execution.
You could add regular breakpoints at the entry point of the listener to achieve the same effect. If however you have multiple elements, all of which have event listeners attached that you want to break on, this becomes an enormous time saver.
Logging on events
In Firefox 71 onwards, the “Log” checkbox is available in the Event Listener Breakpoints list. Selecting this and then choosing some events to break on will mean that when you step through code, information about events fired will be logged to the console instead of the DevTools breaking on each one.
So if we choose to log keyboard events, for example, the code no longer pauses as each event is fired:
Instead, we can then switch to the console, and whenever we press a key we are given a log of where related events were fired.
There's an issue here — the console is showing that the
keypress event is being fired somewhere inside jQuery. Instead, it’d be far more useful if we showed where in our own app code is calling the jQuery that fired the event. This can be done by finding
jquery.js in the Sources panel, and choosing the Blackbox source option from its context menu.
Now the logs will show where in your app jQuery was called, rather than where in jQuery the event was fired:
Filter by event type
Also added to Firefox 71 is a new Filter by event type... text input, which can also be found at the top of the Event Listener Breakpoints list. When you click in this input and type a search term, the list of event listener types will filter by that term allowing you to find the events you want to break on more easily.