How to Debug JavaScript/Jquery Event Bindings with Firebug or Similar Tools

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!') }"
  })
  

How to Debug javascript and jquery with firebug

You can try using FireQuery. From the site:

• jQuery expressions are intelligently presented in Firebug Console and DOM inspector
• attached jQuery data are first class citizens
• elements in jQuery collections are highlighted on hover
• jQuerify: enables you to inject jQuery into any web page
• jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)

I've used it a few times and it makes debugging (when using jQuery) much easier.

EDIT

Using the plugin, you can look at the element and see the events bound to it. Your other option is to search your codebase for anything that identifies the element (id or css class perhaps). Then you should also be able to see what gets bound.

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.

Debugging JavaScript events with Firebug

Well it might all be too much trouble than it's worth, but it looks like you have three things to do:

1. De-minify the source. I like this online tool for a quick and dirty. Just paste your code and click the button. Has never let me down, even on the most funky of JavaScript.

2. All jQuery event binders get routed to "jQuery.event.add" (here's what it looks like in the unbuilt source), so you need to find that method and set a breakpoint there.

3. If you have reached this far, all you need to do is inspect the callstack at the breakpoint to see who called what. Note that since you're at an internal spot in the library you will need to check a few jumps out (since the code calling "jQuery.event.add" was most likely just other jQuery functions).

Note that 3) requires Firebug for FF3. If you are like me and prefer to debug with Firebug for FF2, you can use the age-old arguments.callee.caller.toString() method for inspecting the callstack, inserting as many ".caller"s as needed.

---

Edit: Also, see "How to debug Javascript/jQuery event bindings with FireBug (or similar tool)".

You may be able to get away with:

// inspect    
var clickEvents = jQuery.data($('#foo').get(0), "events").click;
jQuery.each(clickEvents, function(key, value) {
    alert(value) // alerts function body
})

The above trick will let you see your event handling code, and you can just start hunting it down in your source, as opposed to trying to set breakpoint in jQuery's source.

Is there a way to find the event handlers of an element with Javascript?

Chrome Developer tools does this.

1. right click an element
2. click inspect element
3. in the right hand column, scroll down to event listeners

This will give you a list of event listeners on the object that can be expanded to find their source and the attached function.

Firebug has this information under the DOM tab, but it's less user friendly.

---

Related Topics