Debug jQuery events with ‘listHandlers()’

Here’s a useful debugging plugin for jQuery. It will list the handler/’s of any event binded to any element:

The Code:

// UPDATED -> NOW WORKS WITH jQuery 1.3.1
$.fn.listHandlers = function(events, outputFunction) {
    return this.each(function(i){
        var elem = this,
            dEvents = $(this).data('events');
        if (!dEvents) {return;}
        $.each(dEvents, function(name, handler){
            if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
               $.each(handler, function(i,handler){
                   outputFunction(elem, 'n' + i + ': [' + name + '] : ' + handler );
               });
           }
        });
    });
};

Usage:

It’s pretty simple to use, you can specify the elements (as you usually would, via a selector), the events to be listed and the output function to which the plugin will feed the data.

If you’re using firebug then it’s best to use either the console.log function or console.info.

// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);
 
// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);
 
// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '

‘);
});

Note, this will only work if you’ve used jQuery’s native event registration methods, e.g. $(elem).click() / $(elem).bind('click').

Screenshot:

Screenshot of the plugin in action

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!

Joseph McCann January 8th, 2009 at 2:52 pm

Very nice James!

Roman January 14th, 2009 at 11:30 am

Hi,

I put code in plugin, put some anchor tags on page, write some Jquery and $(‘*’).listHandlers(‘*’, console.info);
but keep getting error in FireBug Console:

$("*").listHandlers is not a function
(?)()()JScript1.js (line 8)
to the wait list jQuery.readyList.push()()jquery-1.2.6.js (line 2294)
(?)()()jquery-1.2.6.js (line 2314)
each()([function()], function(), undefined)jquery-1.2.6.js (line 745)
ready()()jquery-1.2.6.js (line 2313)
[Break on this error] $('*').listHandlers('*', console.info);

Not sure what I’m doing wrong?

James January 14th, 2009 at 11:42 am

@Roman, odd, I’m getting an error too (it may be a problem with the new version of firebug). Try this instead:

$('*').listHandlers('*', function(e,d){
    console.info(e,d);
});

Roman January 14th, 2009 at 12:52 pm

First thing is I’ve forgot to put reference to plugin on page 🙁

After that error was gone, but I didn’t see anything in FireBug Console.
With the code your provided in reply it started to work 🙂

Thank you.

Debug jQuery events with ‘listHandlers()’

The Code:

Usage:

Screenshot:

So far there's been 4 Responses to “Debug jQuery events with ‘listHandlers()’”

So far there's been 4 Responses to
“Debug jQuery events with ‘listHandlers()’”