Chrome 开发者工具跟踪函数序列

Question

我是 Chrome 开发者工具的新手，我发现它非常强大。目前，我正在寻找一种方法来在我打开网页时跟踪函数的流程，而且我想知道如何找到单击元素时触发元素的函数。以下是一些示例：

1) 跟踪函数序列： 例如，我的脚本中有 20 个函数。一些函数将调用其他函数。我想跟踪函数调用。比如先调用哪个函数，然后这个函数后面调用什么函数。由于这20个函数比较庞大，光看脚本很难跟上顺序。

2) javascript中元素触发了哪个函数： 例如，我在网页上有一个按钮，有一个或多个功能与此元素相关联。通过使用 Chrome 开发人员工具的事件监听器，我只能看到 "Click" 下的一些 DOM 元素，而不是它与什么函数相关联。

有没有办法找到关联函数？

感谢您的帮助！

Answer 1

1. 在Sources面板中，有一个Call Stack选项卡，您可以在其中看到函数调用堆栈当代码执行在断点处停止时。

2. 在 Elements 面板中，有一个 Event Listeners 选项卡，您可以在其中看到所有事件处理程序绑定到元素，以及它在源代码中的位置。

我建议你阅读一些教程，例如this and this，还有更多。从而让您更加了解它，促进您的发展。