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

Question

我是Chrome开发者工具的新手，我发现它非常强大。目前，我正在寻找一种方法来跟踪功能流，当我打开一个网页时，我想知道我如何才能找到当一个元素被点击时触发它的功能。下面是一些示例：

1)跟踪函数序列:例如，我的脚本中有20个函数。其中一些函数将调用其他函数。我想要跟踪函数调用。比如先调用哪个函数，然后调用哪个函数，然后再调用这个函数。由于这20个函数非常庞大，仅通过查看脚本很难按照顺序进行操作。

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

有没有办法找到相关的函数？

非常感谢您的帮助！

Answer 1

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

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

我建议您阅读一些教程，例如和，还有更多。这样你就可以对它有更多的了解并促进你的发展。