有没有办法知道谁是调用者未在Chrome的调用堆栈中显示的Javascript函数的调用者？

Question

有没有办法知道调用者没有在Chrome的调用堆栈中显示的JavaScript函数的调用方是谁？调用堆栈充满了对我无用的Angularjs函数调用。 Angular.js是Blackboxed，但对于没有触发的断点似乎很有用。

我可以通过对函数名称进行文本搜索并在所有调用者身上添加断点来查找调用者，但这可以解决问题。

还在调用堆栈中查找没有angularjs调用的方法。或者有办法记录所有电话吗？实际的函数调用者似乎已经从调用堆栈窗格滚动。

Answer 1

如果您没有在调用堆栈中看到调用者，则可能意味着执行在不同的上下文中运行。勾选右侧的Async选项以查看跨上下文调用堆栈。

有些电话可能会看到(anonymous)。如果您使用匿名回调函数，这是非常典型的。如果你给它们命名，它会有更好的调试体验。例如：

function myFunc(cb) {
    setTimeout(cb, 100);
}

myFunc(function myCallback() {
    debugger;
})

我不知道Angular，但我已经读过堆栈跟踪很差，特别是$http。有人建议使用Bluebird JS承诺，其中包含long stack traces选项。请参阅讨论here。

Answer 2

我通常做的是：

1. 将您的页面导航到您要调试的位置
2. open dev tool
3. 转到“个人资料”标签
4. 点击“个人资料”
上的“开始”按钮
5. 触发页面上的事件（通过点击或其他方式触发事件）
6. 点击个人资料
上的停止按钮
7. 选择刚刚保存的个人资料
8. 在个人资料报告中，在左上角有一个下拉菜单，除了眼睛相似的图标，选择树（自上而下）
9. 展开树节点以查找刚刚调用的事件，并查看调用了哪些函数。
10. 您还可以通过ctrl + F4（MAC上的commond + F4）搜索树，然后输入关键字，接受文件名
11. 通过单击右侧的文件名链接查看详细信息或设置断点，您将被重定向到Sources视图

一些个人exp通常我不知道事件角度触发了哪个函数，但我知道它使用某个名称或前缀或后缀调用.js文件。我运行配置文件并过滤掉.js，然后单击文件名链接，它将我重定向到Sources选项卡中的详细功能信息

有关个人资料的详细信息：https://developer.chrome.com/devtools/docs/profiles