如何查看从按钮单击到 Chrome 开发工具中的请求调用的函数？答案

【问题标题】：How to view functions called from button click to a request in Chrome Dev Tools?如何查看从按钮单击到 Chrome 开发工具中的请求调用的函数？
【发布时间】：2021-10-13 19:19:54
【问题描述】：

在我点击一个按钮之后，在发送网络请求之前，我如何查看调用了哪些函数以及调用的顺序？我应该用鼠标单击断点还是 XHR/fetch 断点暂停？我想找到某些变量（在这种情况下是请求标头和参数）的来源，它们在请求中传递时是如何构造或生成的

【问题讨论】：

您可以在其中任何一个处停下来看看事件的调用堆栈。它允许您在执行链中尽可能地返回。

标签： javascript google-chrome-devtools breakpoints

【解决方案1】：

Call Stack 显示 Chain 的 call 直到 breakpoint

同时悬停在network 面板中请求的initiator 上会显示call stack

【讨论】：

这里，断点在脚本本身。如果断点在鼠标点击事件上怎么办？（来源 > 事件侦听器断点 > 鼠标 > 点击）
那么它只会在call stack 中显示onclick 函数。调用堆栈不会显示未来的函数
可以给他们看吗？顶部的选项是什么？（跳过函数调用，跳到下一个函数调用等）
我认为没有办法在 chrome 开发工具中显示堆栈中的未来功能，但我可能是错的。顶部的按钮也是调试器的前进或后退

【解决方案2】：

如果您正在寻找触发请求的调用堆栈，您可以使用启动器选项卡。

【讨论】：