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

Using DevTools in the latest Chrome (v29) I find these two tips very helpful for debugging events:

1. Listing jQuery events of the last selected DOM element

   • Inspect an element on the page
   • type the following in the console:

     $._data($0, "events") //assuming jQuery 1.7+

   • It will list all jQuery event objects associated with it, expand the interested event, right-click on the function of the "handler" property and choose "Show function definition". It will open the file containing the specified function.

2. Utilizing the monitorEvents() command