5/23/2014 How to debug Javascript/jQuery event bindings with FireBug (or similar tool) - Stack Overflow

http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool 1/5
Take the 2-minute tour
aksu
3,430 5 10 29
Jaanus
7,967 6 40 72
16 Answers
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 elements, are not fired and
simply stop working.
If I had a capability to edit the application source, I would drill down and add a bunch of Firebug
console.log() statements and comment/uncomment pieces of code to try to pinpoint the problem.
But let's assume I cannot edit the application code and need to work entirely in Firefox using Firebug or
similar tools.
Firebug is very good at letting me navigate and manipulate the DOM. So far, though, I have not been
able to figure out how to do event debugging with Firebug. Specifically, I just want to see a list of event
handlers bound to a particular element at a given time (using Firebug Javascript breakpoints to trace the
changes). But either Firebug does not have the capability to see bound events, or I'm too dumb to find it.
:-)
Any recommendations or ideas? Ideally, I would just like to see and edit events bound to elements,
similarly to how I can edit DOM today.
javascript jquery dom javascript-events event-handling
edited Jan 22 at 15:36 asked Feb 20 '09 at 19:42
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) {
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no
registration required.
How to debug Javascript/jQuery event bindings with FireBug (or similar tool)
sign up

log in

tour

help

careers 2.0

add comment
5/23/2014 How to debug Javascript/jQuery event bindings with FireBug (or similar tool) - Stack Overflow
http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool 2/5
SystemParadox
1,712 13 21
Crescent Fresh
51.6k 13 100 120
Matthew Crumley
45.1k 13 54 90
Jan Odvarko
651 5 2
jQuery.each(clickEvents, function(key, handlerObj) {
console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
})
edited Feb 1 '13 at 11:36 answered Feb 20 '09 at 20:21
190 alert() is bad bad bad for debugging. It's a horrorshow for asynchronous events and trecherous in
animation or mouseevent stuff. console.log() always gives more information, it's formatted nicely and
its non-modal. Always use console.log, die alert die. Paul Irish Dec 20 '10 at 0:09
3 How would this look like for jQuery 1.6? Gezim Sep 15 '11 at 14:05
12 FYI: This will not display events that weren't attached with jQuery Juan Mendes Oct 7 '11 at 18:39
6 Totally agree about console.log(), however it should be hedged with something like if
(window.console) in case it gets left in the code (much easier to do than with alert()) and breaks IE.
thepeer Jan 24 '12 at 16:46
10 @thepeer Personally I prefer to do a check for the console at the start of the file, and if it doesn't exist
create a dummy object. Andrew Feb 4 '12 at 13:15
show 5 more comments
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.
edited Aug 10 '12 at 13:35 answered Feb 20 '09 at 19:52
Thanks! This is almost there, but for some (more problematic) elements, it shows the handler is just { return
false; } even if a handler actually exists. Jaanus Feb 20 '09 at 20:35
1 This bookmarklet seems to have stopped working and their website is down :-(. It seems that the
bookmarklet calls a Javascript file that was on their site Casebash Jul 18 '10 at 23:19
4 @Casebash: It's working again. Matthew Crumley Jul 21 '10 at 3:22
4 Note that since this runs in content JavaScript, it gets its data by querying JavaScript libraries. So it will only
show events added with a supported library (which includes jQuery). Matthew Flaschen Sep 25 '11 at 4:57
When I tried to use Visual Event on my page, I got a JavaScript error somewhere in their script, and then
nothing happened. Results my vary, but this didn't work for me. Josh Oct 27 '11 at 18:05
show 4 more comments
The Eventbug extension has been released yesterday, see:
http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/
Honza
answered Oct 30 '09 at 12:05
Integrates great in Firebug. Thanks for the suggestion! Husky Sep 29 '10 at 9:11
Jan thank you! No, really! Liutauras Feb 11 '11 at 16:48
+1 This answer should get more votes, to vie for top position. It provides a Firebug way to solve the issue,
which (like the author seems to prefer) is the reason I got to this page. user66001 Jan 24 at 18:33
This seems like an interesting feature. Is it gone? I can't find how to install Eventbug. I've been to the link given
above, but I don't understand how to download/install this addon into Firebug. Thanks. Chris22 Mar 7 at
5/23/2014 How to debug Javascript/jQuery event bindings with FireBug (or similar tool) - Stack Overflow
http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool 3/5
Shrikant Sharat
3,122 3 19 47
James
54.3k 15 85 134
Mark
20.7k 6 42 66
Cristian Sanchez
10.7k 4 29 46
19:17
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 .
edited Jul 29 '11 at 16:08 answered Oct 7 '09 at 3:26
That plugin has 1 really big downside: When you are debugging, and you want to inspect the value of a
variable which contains a jquery collection you are not able to inspect the value when your code is paused.
This is not the cause with firebug. The reason for me to uninstall it. alone BlackHawkDesign Apr 16 '12 at
12:11
+1 This answer should get more votes, to vie for top position. It provides a Firebug way to solve the issue,
which (like the author seems to prefer) is the reason I got to this page. user66001 Jan 24 at 18:34
Here's a plugin which can list all event handlers for any given element/event:
$.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')).
$.each(handler, function(i,handler){
outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );
});
}
});
});
};
Use it like this:
// 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 + '<\/pre>');
});
Src: (my blog) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/
answered Feb 20 '09 at 21:04
The WebKit Developer Console (found in Chrome, Safari, etc.) lets you view attached events for
elements.
More detail in this Stack Overflow question
edited Mar 1 '13 at 19:48 answered Aug 21 '10 at 18:21
Use $._data(htmlElement, "events") in jquery 1.7+;
add comment
add comment
add comment
add comment