How do I find out what functions are called when a button is pressed in Chrome Console?

Question

I am trying to teach myself the Google Closure javascript library. I am examining the TreeControl UI widget.

How can I use Chrome Console to analyze what functions are run when I click on the "Cut" button in the demo below? For instance, can I somehow set a break point for that? I've tried viewing the source and looking around, but I feel that Chrome Console may offer a more systematic method.

https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html

Solution 1

With the Chrome Developer Tools window open, click on the "Sources" tab. If you don't see anything you may need to click on the "Show Navigator" button in the upper-left corner of that tab. With the navigator open, navigate to the file where the cut() function is defined (in your case it's demo.html). When you bring the file into view, find the line where the cut() function is defined and then set a breakpoint on the first line within that function. You can set a breakpoint by clicking the line number on the left side.

Once you've set your breakpoint(s), do something on the page that would trigger the cut() function and the browser should break script execution as soon as it enters the cut() function (assuming your breakpoint is on the first line within the cut() function). From this point you can use the controls on the top right of the tab to step in/out/around code and see what's going on.

Here's a screenshot of me doing it: http://d.pr/i/f6BO

Also, here's a great video that talks about using the Chrome Dev tools, including setting breakpoints: http://www.youtube.com/watch?v=nOEw9iiopwI

Solution 2

The thing that you are looking for is called 'Profiling'.

It can be achieved by:

1. Go to Profiles
2. Choose first option ('Collect JavaScript CPU Profile')
3. Start it before pressing button 'Cut'

Solution 3

This may be helpful for some people:

You can right click an element on the elements tab and use 'break on' to break on e.g. sub element modification. https://developer.chrome.com/devtools/docs/javascript-debugging

Comments

[dangerChihuahua007]

Thanks, setting breakpoints within cut() and viewing the call stack after triggering it works great.

[Austin Burk]

Your screenshot link is broken.

[Yashwardhan Pauranik]

Then what? I.ve clicked the checkbox, but nothing happened. Can you tell me what to do next?

[Adam]

Awesome tip to see what JS is being called without knowing the function name.