Chrome开发人员工具跟踪功能序列

Question

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

1）跟踪功能序列： 例如，我的脚本中有20个函数。某些功能会调用其他功能。我想跟踪函数调用。就像首先调用哪个函数一样，然后调用此函数调用的函数。由于这20个函数非常庞大，因此只需查看脚本就很难遵循该序列。

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

有没有找到相关功能的方法？

感谢您的帮助！

Answer 1

1. 在来源面板中，有一个调用堆栈标签，当您在断点处停止代码执行时，您可以在其中看到函数调用堆栈。 / p>

   

2. 在元素面板中，有一个事件监听器标签，您可以在其中看到所有事件处理程序与该元素绑定，以及它在何处在源代码中。

   

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