如何在Chrome控制台中查看当按下按钮时调用了哪些函数？

Question

我正在尝试自学Google Closure javascript库。我正在研究TreeControl UI小部件。

我如何使用Chrome控制台来分析当我点击下面演示中的"Cut“按钮时运行了哪些函数？例如，我可以为它设置一个断点吗？我尝试过查看源码和查看，但我觉得Chrome控制台可能提供了一种更系统的方法。

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

Answer 1

打开Chrome开发人员工具窗口，单击“源”选项卡。如果您没有看到任何内容，您可能需要单击该选项卡左上角的“显示导航器”按钮。在导航器打开的情况下，导航到定义cut()函数的文件(在本例中为demo.html)。将文件置于视图中时，找到定义cut()函数的行，然后在该函数的第一行上设置断点。您可以通过单击左侧的行号来设置断点。

一旦设置了断点，就在页面上执行一些会触发cut()函数的操作，一旦脚本进入cut()函数，浏览器就会中断脚本执行(假设断点位于cut()函数的第一行)。从这一点上，您可以使用选项卡右上角的控件来单步执行/退出/绕过代码，并查看发生了什么。

这是我这样做的截图：http://d.pr/i/f6BO

此外，这里有一个很棒的视频，它讨论了如何使用Chrome Dev工具，包括设置断点：http://www.youtube.com/watch?v=nOEw9iiopwI

Answer 2

您可能要在调试器区域的右侧查找“事件侦听器断点”部分。打开该窗口并选择“鼠标”下的单击事件。请参阅屏幕图像。然后单击应用程序中的按钮，您将立即进入正在执行的代码。

​

​

Answer 3

你要找的东西叫做“分析”。

它可以通过以下方式实现：

按下Go to Profiles

• Choose first选项('Collect Profile')

• Start CPU it

1. 1. 'Cut'