如何在浏览器中获取XHR调用的堆栈跟踪？

Question

每次发出HTTP请求时，是否有某种方法可以在浏览器中获取堆栈跟踪？我使用的是Chrome开发工具，但是我会使用不同的工具，如果有的话可以做到这一点。

我想我可以monkeypatch XMLHttpRequest抛出错误，但这是一个相当尴尬的解决方案。

我正在尝试确定为什么要发出HTTP请求，并且能够识别导致该请求的高级函数真的会有所帮助。

Answer 1

如果您使用的是Firefox，请使用Firebug插件。 在firebug中，您可以轻松查看HTTP调用堆栈。 你可以很容易地看到一个断点的javascript代码。当调试器在断点处停止时，它会显示它到达那里的操作堆栈。 阅读Firebug Tutorial

Answer 2

您可以通过将其设置为undefined来删除浏览器中的XMLHttpRequest支持：

XMLHttpRequest = undefined

然后，只要您尝试使用它，它就会失败 - 并抛出可用于堆栈的错误。

或者更好地用自己替换send()方法来获取堆栈：

XMLHttpRequest.prototype.send = function() { 
    try {
        crash.me.now(); //make sure this is undefined
    }
    catch(err) {
        console.error(err.stack || err.stacktrace || err.stackTrace);
    }
}

Answer 3

在chrome dev工具中，如果捕获时间轴活动，则可以看到类似这样的内容。

首先，打开开发工具，然后转到＆＃34;时间线＆＃34;标签。应该要求你捕捉时间表。点击ctrl-E并重新加载页面。页面加载后，按＆＃34;完成＆＃34;按钮。

然后转到＆＃34;网络＆＃34;选项卡，单击要查看的ajax请求。此时，您应该检查您的概览是否可见：在标签行下方，有一部分显示＆＃34;查看：＆＃34;在那里你应该切换概述，如果它还没有。

现在，您可以使用鼠标在概览中选择该部分，就像选择文本一样。选择包含ajax请求的概述部分。

现在，切换到＆＃34;时间线＆＃34;标签。确保在＆＃34; View＆＃34;部分你已切换＆＃34; flamechart＆＃34;上。现在，应该有javascript函数调用可见。不幸的是，似乎函数调用的名称被截断为优化形式，但至少有到具有这些函数的js文件的链接。无论如何，您看到的堆栈的最顶层应该是触发XMLHttpRequest调用的事件。

Answer 4

在Chrome devtools中，有一个用于设置“ XHR断点”的选项。

一旦触发send（）请求，代码将暂停，命中断点，然后您通常可以看到堆栈跟踪，类似于使用代码断点。