49

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?

Improve this question
3
  • 2
    In firebug, you can click on the "pause" button. Then, click where you want to. The "pause" button will make your debugging stop as soon as js is doing something. Commented Apr 21, 2012 at 20:55
  • Related: stackoverflow.com/questions/446892 Commented Apr 21, 2012 at 20:55
  • 2
    There is an "event listeners" section in the Chrome developer tools, at least. Maybe IE has them too, or you could just check it in Chrome. It's below the panel that shows CSS properties. Commented Apr 21, 2012 at 20:55

5 Answers 5

Reset to default
51

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks GGG, I have done this and can see the listenerBody, but the line number is incorrect I think (it says line 1 which would appear to be wrong). The javascript file has been minified and is all on one line so I guess that is the reason. Is there a way I can discover the name of the listener function? Or find the correct line number?
There sure is. Find the script in the "Resources" tab of the inspector (you should be able to get there from the Event Listeners panel) and look at the bottom of the window. Near where the magnifying glass is in the screenshot above, you'll see a button that looks like this: {}. Click that, it's a pretty-print button. Now look back at the Event Listeners panel, it will use the new line numbers from the pretty-printed code.
Do you mean "Scripts" tab? I see a {} pretty print button under the "Scripts" tab but not the "Resources" tab. Actually I had already tried formatting the script with this button in the "Scripts" tab but the line number in the "Event Listeners" panel didn't update. Any ideas on getting it to update? Thanks
Sorry, I did mean the Scripts tab. You may need to reload the page to get it to show the new line number (pretty printing will stay on if the console stays open). The line number that is updated is shown on the right side of the Event Listeners panel in light grey, underlined, and clicking it takes you to that line in the Scripts tab. Just tested in Chrome 17.
I tried reloading the page but it's just not working. I'm using Chrome 18. But actually I have found an even nicer way... In the Scripts tab on the right there is an Event Listener Breakpoints panel. I checked mouse and under mouse - click. Then I just click on the tool div element I am intereste in and the script breaks right on the event handler. Thanks a lot for the help though, I'm going to spend a lot more time from now on getting into Chrome developer tools.
10

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.

Improve this answer

Comments

4

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.

Improve this answer

Comments

3

To locate a potential event handler for a particular element that has been added dynamically try performing a search in all sources of classnames and ids. Once you've found an event handler you can set a breakpoint and verify.

Google Chrome has a global search that works great.

Improve this answer

Comments

1

Open up your debugger and start the profiler. Click on what ever you want. Look at what the profiler and see what was called.

Improve this answer

1 Comment

Interesting, but that produces a jumble of 50+ profiler entries when I'm looking for the toggle() function when clicking on the maximize button in the top-right corner of this page.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.