如何在Chrome控制台中按下按钮时找出调用的功能？

Question

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

当我点击下面演示中的“剪切”按钮时，如何使用Chrome控制台分析运行的功能？例如，我可以以某种方式为此设置一个断点吗？我已经尝试查看源代码并环顾四周，但我觉得Chrome控制台可能会提供更系统的方法。

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

Answer 1

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

Answer 2

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

一旦你设置了断点，在页面上做一些会触发cut()功能的东西，浏览器一进入cut()函数就会破坏脚本执行（假设您的断点位于cut()函数中的第一行。从这一点开始，您可以使用选项卡右上角的控件来进/出/围绕代码，看看发生了什么。

以下是我的截图：http://d.pr/i/f6BO

此外，这是一个很棒的视频，介绍了如何使用Chrome开发工具，包括设置断点：http://www.youtube.com/watch?v=nOEw9iiopwI

Answer 3

您正在寻找的东西称为“分析”。

可以通过以下方式实现：

1. 转到个人资料
2. 选择第一个选项（'收集JavaScript CPU配置文件'）
3. 在按下“剪切”按钮
之前启动它

Answer 4

这可能对某些人有帮助：

您可以右键单击元素标签上的元素，并使用'break on'来打破例如子元素修改。 https://developer.chrome.com/devtools/docs/javascript-debugging