70

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

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

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

4

4 回答 4

122

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

在此处输入图像描述

于 2012-06-13T04:42:09.020 回答
34

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

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

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

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

于 2012-06-13T04:38:47.297 回答
16

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

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

  1. 转到个人资料
  2. 选择第一个选项（“收集 JavaScript CPU 配置文件”）
  3. 在按下“剪切”按钮之前启动它
于 2012-06-13T04:39:34.180 回答
5

这可能对某些人有帮助：

您可以右键单击元素选项卡上的元素并使用“中断”来中断例如子元素修改。https://developer.chrome.com/devtools/docs/javascript-debugging

于 2014-09-05T09:48:37.890 回答