Client side browsers debuggers: how can I see the list of handlers currently registered on an element?

Question

Learning client side code of an existing site, would like to understand some activity that takes place totally at the client side.

Want to know what JS handlers are being called when I click on a specific element. Is there a way to see this information in some kind of debugger?

I'm using Firefox with Firebug, or Chrome

Answer 1

You can use the Chrome Developer tools to do what you are looking for if I'm reading your question correctly (apologies if I did not). In Chrome, right-click on the element in the rendered page and choose "Inspect Element". On the right side of the tool window that opens there's a section called "Properties" that will pop down a list when clicked on. Investigating the sub-categories should show you what functions are hooked up to what events. You can then use the "Scripts" area (tab at the top of the Development Tools window) to set breakpoints and observe the behavior in script files. Hope that helps.