How to debug JavaScript / jQuery event bindings with Firebug or similar tools?

Question

I need to debug a web application that uses jQuery to do some fairly complex and messy DOM manipulation. At one point, some of the events that were bound to particular eleme

Answer 1

With version 2.0 Firebug introduced an Events panel, which lists all events for the element currently selected within the HTML panel.

It can also display event listeners wrapped into jQuery event bindings in case the option Show Wrapped Listeners is checked, which you can reach via the Events panel's options menu.

With that panel the workflow to debug an event handler is as follows:

1. Select the element with the event listener you want to debug
2. Inside the Events side panel right-click the function under the related event and choose Set Breakpoint
3. Trigger the event

=> The script execution will stop at the first line of the event handler function and you can step debug it.

Answer 2

jQuery stores events in the following:

$("a#somefoo").data("events")

Doing a console.log($("a#somefoo").data("events")) should list the events attached to that element.

Answer 3

There's a nice bookmarklet called Visual Event that can show you all the events attached to an element. It has color-coded highlights for different types of events (mouse, keyboard, etc.). When you hover over them, it shows the body of the event handler, how it was attached, and the file/line number (on WebKit and Opera). You can also trigger the event manually.

It can't find every event because there's no standard way to look up what event handlers are attached to an element, but it works with popular libraries like jQuery, Prototype, MooTools, YUI, etc.