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

Question

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 eleme

Answer 1

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.

Answer 2

I also found jQuery Debugger in the chrome store. You can click on a dom item and it will show all events bound to it along with the callback function. I was debugging an application where events weren't being removed properly and this helped me track it down in minutes. Obviously this is for chrome though, not firefox.

Answer 3

ev icon next to elements

Within the Firefox Developer Tools' Inspector panel lists all events bound to an element.

First select an element with Ctrl + Shift + C, e.g. Stack Overflow's upvote arrow.

Click on the ev icon to the right of the element, and a dialogue opens:

Click on the pause sign || symbol for the event you want, and this opens the debugger on the line of the handler.

You can now place a breakpoint there as usual in the debugger, by clicking on the left margin of the line.

This is mentioned at: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

Unfortunately, I couldn't find a way for this to play nicely with prettyfication, it just seems to open at the minified line: How to beautify Javascript and CSS in Firefox / Firebug?

Tested on Firefox 42.

Answer 4

The WebKit Developer Console (found in Chrome, Safari, etc.) lets you view attached events for elements.

More detail in this Stack Overflow question

Answer 5

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

Answer 6

According to this thread, there is no way in Firebug to view what events are attached to listeners on a DOM element.

It looks like the best you can do is either what tj111 suggests, or you could right-click the element in the HTML viewer, and click "Log Events" so you can see which events are firing for a particular DOM element. I suppose one could do that to see what events could be firing off particular functions.