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

Answer 1

You can also check Visual Event addon available for chrome.

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

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 4

There is now an Event Listeners tab in Chrome.

Answer 5

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

Answer 6

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: