Find attached / bound events of an element using Chrome Development Tools / Firebug / IE Developer Toolbar

Question

When inspecting a page's DOM, I would like to know the attached event(s) of an element quickly

For example, if a button has this HTML DOM

<button id="button1">Click Me</button>

And somewhere (not in a place that I know in advance) it has an event attached, e.g.

$("#button1").click(function(){...});

I know it can be done programatically ( Can I find events bound on an element with jQuery? )

but is there a way using just one of the developer tools for Chrome / Firefox / IE to see a list of events?

---

Update: I found out that in the newer Chrome versions I have a tab called EventListeners but it seems it doesn't allow easy drill down all the way down to the source of the event, as jQuery wraps the original

Answer 1

FireQuery - http://firequery.binaryage.com/ lets you see events bound to elements and drill into them

Answer 2

To get the first attached handler on the first $("#button1") element

$._data($("#button1").get(0),"events").click[0].handler

JSFiddle

The long story that nobody wants to hear: I came here searching for a plugin. I was thrilled to see @schmidlop's answer, but in jQuery that doesn't actually give me the listener I'm looking for, it just shows the generic handler for jQuery events that eventually call the specific callback. Im still looking for a Chrome plugin that would allow me to right click on an element and let me drill into the handlers attached to the object.

Cause that would be cool.

UPDATE: I found a chrome extension called jQuery Debugger. You simply "Inspect Element" and choose "jQuery Events" from the "Elements" submenu... https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi

Answer 3

There is now an Event Listeners tab in Chrome.

Answer 4

With the Chrome inspector select the element in the "Elements" tab and then from the "Console" tab you can see the events attached to the element with getEventListeners($0);.

Answer 5

Firefox's developer tools now display an "ev" next to elements which have bound events. This can be used to inspect bound events (including jQuery events).

Here is an example of inspecting the "First Paragraph" element from the jQuery click documentation:

Answer 6

You can also check Visual Event addon available for chrome.