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

Question

我是Chrome开发人员工具的新手,我发现它非常强大.目前,我正在寻找一种方法来跟踪打开网页时的功能流程,而且,我想知道如何在单击时找到元素触发的功能.这里有些例子:

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

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

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

我感谢你的帮助!

Answer 1

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

   

2. 在" 元素"面板中,有一个" 事件侦听器"选项卡,您可以在其中看到所有事件处理程序与元素绑定,以及它在源代码中的位置.

   

我建议你阅读一些教程,比如这个和这个,还有更多.这样您就可以了解更多信息并促进您的发展.