Are there tools / techniques to debug jQuery event handlers?

Visual Event is a nice javascript bookmark you can run on a page to see all the events that are attached to a control.

If you are using jQuery to assign your event handlers you can locate the attached events via $("div").data("events");

$("div.test").each(function(){    var events = $(this).data("events");    //events.click will give you a list of click handlers, events.mouseenter, etc..    $.each(events, function(i, eventType){        $.each(eventType, function(){          //this.handler() can be used to find the anonymous function assigned to the element.          $("body").append("<h1>" + this.type + "</h1>");        });    });});

If you wish to get live handlers you can do the same thing for the document.

var liveEvents = $(document).data("events").live;$.each(liveEvents, function() {    $("body").append("<h1>" + this.selector + this.origType +  "</h1>");});

Example on jsfiddle.

Install fireQuery plugin for firebug and you will see all jQuery-attached events in the firebug display, just like you wish ;)

You can find it here: http://firequery.binaryage.com/ or here: https://addons.mozilla.org/en-us/firefox/addon/firequery/

It will make your firebug look like this: