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

Question

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

1) 跟踪函数序列:例如，我的脚本中有 20 个函数。一些函数将调用其他函数。我想跟踪函数调用。比如先调用哪个函数，然后这个函数后面调用什么函数。由于这 20 个函数非常庞大，仅通过查看脚本很难理解顺序。

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

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

感谢您的帮助!

Answer 1

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

   

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

   

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