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

Answer 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