How do I find out what javascript runs when I click an element? [duplicate]

Question

I am looking at the Bing Maps site. I am opening up the my places editor and clicking the polyline tool in the drawing toolbar.

I would like to discover what javascript runs when I click on tools in the drawing toolbar.

I have looked at the html and there is no onclick event declared on the element.

I have done text searches on all of the scripts referenced by the page, for the ID of the polyline tool element. This was to try to find javascript that attaches a click event to the element, but I got no matches at all.

There must be some script running when I click on a tool. How do I find out what script is executing when I click the tool divs in the toolbar?

I don't think there is anyway I can set breakpoints if I don't first know what script to set them on. Is there anyway I can trap the javascript that runs to discover what it is, either in IE F12 developer tools or in firebug?

Answer 1

You can have a look at the "Event Listeners" panel in Chrome, it has detailed information about each listener attached to an element.

Answer 2

In Chrome Developer Tools click on the timeline tab, uncheck "Loading" and "Rendering", then click the record button (filled circle). Trigger your event by clicking on the button and then stop recording by clicking the circle again. Find your event in the timeline and expand it by clicking on the arrow beside it. On the left it will tell you which function the event called.