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

See How to find event listeners on a DOM node.

In a nutshell, assuming at some point an event handler is attached to your element (eg): $('#foo').click(function() { console.log('clicked!') });

You inspect it like so:

• jQuery 1.3.x

  var clickEvents = $('#foo').data("events").click;jQuery.each(clickEvents, function(key, value) {  console.log(value) // prints "function() { console.log('clicked!') }"})

• jQuery 1.4.x

  var clickEvents = $('#foo').data("events").click;jQuery.each(clickEvents, function(key, handlerObj) {  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"})

See jQuery.fn.data (where jQuery stores your handler internally).

• jQuery 1.8.x

  var clickEvents = $._data($('#foo')[0], "events").click;jQuery.each(clickEvents, function(key, handlerObj) {  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"})

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.

You could use FireQuery. It shows any events attached to DOM elements in the Firebug's HTML tab. It also shows any data attached to the elements through $.data.