如何找到触发 ajax 的 javascript 代码？答案

【问题标题】：How to find which javascript code fired ajax?如何找到触发 ajax 的 javascript 代码？
【发布时间】：2013-01-09 08:15:00
【问题描述】：

有什么快速的方法可以找出哪个 javascript 代码（文件名和确切的行）触发了特定的 ajax 调用？

使用 firebug 我可以定位 ajax 调用，但快速找出确切的行将有助于调试

提前感谢您的帮助

【问题讨论】：

stackoverflow.com/questions/5154447/… 的副本？
@Simon Lindholm 你是对的。很抱歉，当我在发布此问题之前搜索 SO 时，找不到该链接。现在我得到了我想要的。谢谢。

标签： javascript ajax debugging firebug

【解决方案1】：

在 Firebug 中，您可以单击控制台面板中的源链接：

或在网络面板中设置断点：

【讨论】：

【解决方案2】：

如果您在代码中在此 ajax 调用处设置断点，调试器将向您显示函数调用堆栈。

从Chrome developer tools documentation 看到这个：

【讨论】：

感谢您的快速回复。我的目的是找出触发这个 ajax 的确切行。我正在调试其他人开发的代码。有没有办法做到这一点？
我不确定我是否看到缺少的部分。也许我不明白您所说的“定位 ajax 调用”是什么意思。你能详细说明这一点吗？

【解决方案3】：

我真的不知道任何干净的方法（也许存在一种）。但我有一点建议。

如果您没有在网页中使用 Prototype.js，请在命令行中输入以下命令（使用 Firebug 1.11）：

window.old$ = $; // in case you're using a framework like jQuery
include("https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"); // loads Prototype

控制台应该打印：prototype.js 正确包含。

然后，要恢复旧的“$”变量，请键入：

window.$ = window.old$;

既然已经加载了 Prototype，我们可以包装 XMLHttpRequest.prototype.open 函数，这样我们就可以获得调用堆栈（就像建议的 dystroy 一样）：

XMLHttpRequest.prototype.open = XMLHttpRequest.prototype.open.wrap(function(orig, ...args)
{
    console.log("trace for :"+args[1]); // prints the URL of the request
    console.trace(); // prints the stack trace
    orig.apply(null, args); // call the original function
});

就是这样。

注意：如果请求在开始时启动：

在“脚本”面板中，在网页的第一条 JS 指令处设置断点
在控制台面板中执行上述命令
返回脚本面板，点击继续

【讨论】：

【解决方案4】：

我通常做的是添加一堆：

console.log("message that explains where in the code I am now...");

但请注意，因为 console.log 可能会在旧版本的 IE 中产生问题，所以您必须在投入生产时删除所有 console.log 调用。

【讨论】：

感谢您的回复。但在这里我正在调试其他人的代码。 :-)