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

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?


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

enter image description here


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.


I've used the Profiler in Chrome's debug tools for this purpose before.

Open the site in Chrome, F12 to get the debug tool open. In the tabs at the top of the tool, click Profiles.

Make sure Collect JavaScript CPU Profile is selected, and hit Start, then click on the polyline tool you're curious about, and hit Stop. The profiler should now list out all Javascript calls made while the profiler was active.

Firebug probably has something similar.