如何找出在 Chrome 控制台中按下按钮时所调用的函数？

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

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

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

99946 次浏览
小开
最佳答案

打开“ Chrome 开发工具”窗口，点击“来源”选项卡。如果您没有看到任何东西，您可能需要点击“显示导航”按钮在左上角的标签。打开导航器后，导航到定义 cut()函数的文件(在您的示例中是 demo.html)。在查看文件时，找到定义 cut()函数的行，然后在该函数的第一行上设置断点。可以通过单击左侧的行号来设置断点。

一旦设置了断点，在页面上做一些触发 cut()函数的事情，浏览器应该在进入 cut()函数后立即中断脚本的执行(假设断点位于 cut()函数的第一行)。从这里开始，您可以使用选项卡右上方的控件单步执行/out/around 代码并查看正在发生的情况。

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

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

小开

你要找的东西叫做“侧写”。

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

  1. 去档案室
  2. 选择第一个选项(“收集 JavaScript CPU 配置文件”)
  3. 开始之前，按下按钮’切断’
小开

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

enter image description here

小开

这可能对某些人有帮助:

你可以在 element 选项卡上右键单击一个元素，然后使用‘ break on’来中断，比如子元素修改。https://developer.chrome.com/devtools/docs/javascript-debugging


提交答案