Using Chrome, how to find to which events are bound to an element

Using Chrome 15.0.865.0 dev. There's an "Event Listeners" section on the Elements panel:

And an "Event Listeners Breakpoints" on the Scripts panel. Use a Mouse -> click breakpoint and then "step into next function call" while keeping an eye on the call stack to see what userland function handles the event. Ideally, you'd replace the minified version of jQuery with an unminified one so that you don't have to step in all the time, and use step over when possible.

You can also use Chrome's inspector to find attached events another way, as follows:

1. Right click on the element to inspect, or find it in the 'Elements' pane.
2. Then in the 'Event Listeners' tab/pane, expand the event (eg 'click')
3. Expand the various sub-nodes to find the one you want, and then look for where the 'handler' sub-node is.
4. Right click the word 'function', and then click 'Show function definition'

This will take you to where the handler was defined, as demonstrated in the following image, and explained by Paul Irish here: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

(Latest as of 2022) For version Chrome Version Version 99:

1. Select the element you want to inspect

2. Choose the Event Listeners tab

3. Make sure to check the Framework listeners to show the real javascript file instead of the jquery function.

Give it a try to the jQuery Audit extension (https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg), after installing follow these steps:

1. Inspect the element
2. On the new 'jQuery Audit' tab expand the Events property
3. Choose for the Event you need
4. From the handler property, right click over function and select 'Show function definition'
5. You will now see the Event binding code
6. Click on the 'Pretty print' button for a more readable view of the code