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

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 2

There is now an Event Listeners tab in Chrome.