Javascript Chrome开发者工具跟踪功能序列

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

1） 跟踪功能序列： 例如，我的脚本中有20个函数。其中一些函数将调用其他函数。我想跟踪函数调用。比如先调用哪个函数，然后这个函数调用什么函数。由于这20个函数非常庞大，因此仅通过查看脚本就很难遵循顺序

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

有没有找到关联函数的方法

谢谢你的帮助

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

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

---

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

1。你可以通过个人资料获得。2.您可以使用堆栈跟踪或断点获取。您能更具体地说吗？什么是个人资料？使用堆栈跟踪获取，您的意思是我可以为每个函数添加20个断点，然后运行页面，看看如何运行？谢谢使用devtools的“Profiles”选项卡获取在配置文件期间调用的函数列表。我将使用配置文件，以前从未使用过。但是如何使用堆栈跟踪来获取元素触发器的函数呢？非常感谢，这非常有帮助。这将大大减少我的调试时间：）嗨，利奥，我还有一个关于你的2）的问题。在我的代码中，我实际使用的是Jquery，因此在事件侦听器选项卡中，它不会在我的js文件中看到它实际调用的函数，而是始终显示Jquery.js:2。你以前遇到过这种情况吗？@GuifanLi我猜你使用的是jquery的dist版本，它被破坏和压缩了。加载sourcemap可能会修复调试问题。