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.