We have made a great further progress with John J. Barton on a new extension for Firebug called Eventbug. Big thanks to Olli Pettay (smaug) for fixing #448602 + #506961 and providing new Firefox APIs that allow enumerating event listeners on a web page!

Notice that these APIs are available in Firefox 3.7a1pre (I hope they'll make it into 3.6) and you also need Firebug 1.5 to test it.

Update: all necessary APIs for Eventbug have been backported to Firefox 3.6b3pre.

This extension brings a new Events panel that lists all of the event handlers on the page grouped by event type. The panel also nicely integrates with other Firebug panels and allows to quickly find out, which HTML element is associated with specific event listener or see the Javascript source code.

So, see it in action!

Event Panel

The screenshot below shows content of the Events panel and three side panels (click the image to see the original size).

Side panels are synchronized according to the selected listener in the main content area.

Targets Shows list of event targets that would be used as DOMEvent.currentTarget when event bubbles. All targets are clickable and navigate the user to the HTML panel.

Shows list of event targets that would be used as DOMEvent.currentTarget when event bubbles. All targets are clickable and navigate the user to the HTML panel. Script Shows source code of the selected listener.

Shows source code of the selected listener. HTML Shows HTML code of the element that is associated with the selected listener.

HTML Panel

The extension also registers a new Events side-panel within the HTML panel.

In this case the Events side panel shows all registered event listeners for the selected HTML element.

Recommended Configuration

Firefox 3.7a1pre

Firebug 1.5b1

Eventbug 0.1a2

Known Issues

Eventbug is still in alpha phase and there are some known issues.

The panel is not updated if listeners are dynamically appended or removed upon user actions. You have to manually click the Refresh button (in the toolbar). This will be fixed as soon as #524674 is fixed (thanks Smaug! 🙂 )

If a listener is defined using a HTML attribute (e.g. click="alert('hello world!')" ) the source code is not compiled till the listener is actually executed (Firefox optimization). Eventbug UI doesn't reflect this and it can happen that link to a listener's source code doesn't work. The link should be disabled if the script object is not available.

) the source code is not compiled till the listener is actually executed (Firefox optimization). Eventbug UI doesn't reflect this and it can happen that link to a listener's source code doesn't work. The link should be disabled if the script object is not available. The Script side panel doesn't yet allow to create breakpoint's.

And of course, as usual, if you have any ideas how to improve this feature let us know. If you found a bug, please report it.

Thanks!