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

Question

有什么方法可以在每次发出 HTTP 请求时在浏览器中获取堆栈跟踪信息？我正在使用 Chrome 开发工具，但如果有可以执行此操作的工具，我将使用其他工具。

我想我可以通过 monkeypatch XMLHttpRequest 来抛出错误，但这是一个相当笨拙的解决方案。

我正在尝试确定发出 HTTP 请求的原因，如果能够识别导致该请求的高级函数将非常有帮助。

Answer 1

如果您使用的是 firefox，则使用 Firebug 插件。在 firebug 中，您可以很容易地看到 HTTP 调用的堆栈。您可以很容易地看到 javascript 代码放置了一个断点。当调试器在断点处停止时，它会显示它为到达那里所做的操作堆栈。阅读 Firebug Tutorial

Answer 2

您可以通过将 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 开发工具中，如果您捕获时间线 activity，您可以看到类似这样的内容 activity。

首先，打开开发工具，然后转到 "timeline" 选项卡。它应该要求您捕获时间线。按 ctrl-E 并重新加载页面。页面加载后，按 "finish" 按钮。

然后转到 "network" 选项卡，单击要查看的 ajax 请求。此时你应该检查你是否有可见的概述：在选项卡行下方，有部分显示 "View:" 如果它还没有，你应该打开概述。

现在您可以使用鼠标 select 概览中的那个部分，就像 select 编辑文本一样。 Select 概述中有您 ajax 请求的部分。

现在，切换到 "timeline" 选项卡。确保在 "View" 部分您已打开 "flamechart"。现在，应该可以看到 javascript 函数调用。不幸的是，函数调用的名称似乎被截断为优化形式，但至少有指向具有这些函数的 js 文件的链接。无论如何，您看到的堆栈的最顶层应该是触发 XMLHttpRequest 调用的事件。

Answer 4

在 Chrome devtools 中有一个选项可以设置 "XHR breakpoint"。

一旦触发 send() 请求，代码就会停止，命中断点，然后您可以看到堆栈跟踪，通常类似于使用代码断点。

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

How to get stack traces for XHR calls in a browser?

javascript

xmlhttprequest

google-chrome-devtools