我该如何找出哪个Javascript代码导致了Ajax请求？

Question

我遇到了一个Java JSF应用的问题：在某种情况下，用户操作会触发一个Ajax HTTP请求，正确地更新UI，但接着立即触发第二个请求，导致第二次不正确的更新。

我该如何找出（最好使用Firebug）第二个请求是在哪里被触发的？由于有很多压缩后的框架JS代码，因此我不知道在哪里设置断点。将表单onsubmit处理程序设置为console.trace没有帮助，我想这是因为这些是独立的Ajax请求。

- Michael Borgwardt

Answer 1

在尝试答案中的建议时，我发现Firebug已经完全符合我需要的需求：控制台选项卡显示所有请求，并且对于Ajax请求，它显示了它们起源的文件和行号，这告诉我在哪里设置我的断点...

- Michael Borgwardt

---

这不是在Chrome开发者工具中实现的吗？ - eugene

@eugene：很有可能，是的。 - Michael Borgwardt

谢谢Michael。记录一下，这在“网络-初始化程序”选项卡中。将鼠标悬停在链接上，它将显示调用堆栈。 - eugene

Answer 2

使用Firebug可以在UI更新中设置DOM（HTML）Mutation事件的断点，以便在HTML更改时进行调试。

- Dean Burge

---

但这将在收到响应时触发，不是吗？我需要找出请求的起始位置。 - Michael Borgwardt

当然可以，但这会缩小你可以选择开始调试的范围。你也可以对请求、响应、UI更新周期进行分析，以缩小活动发生的范围。 - Dean Burge

Answer 3

如果框架抽象了AJAX请求，您应该能够跟踪对抽象的调用。例如，jQuery通过其全局AJAX事件处理程序允许此操作。

另一种更强大的解决问题的方法是替换XHR对象并跟踪对它进行的调用（即，如果框架没有提供上述抽象或者您想要使用的调用不使用抽象）。只需将页面末尾的脚本中的GM_log替换为console.trace，并将其包含在您正在测试的页面中即可。

- Alex Gyoshev

Answer 4

在这种情况下，我个人所做的是使用一个可以将请求或响应“暂停”的HTTP代理。例如Burp Proxy^{（实际上这是一个安全工具，但它非常适合调试目的）}

启动代理并配置您的浏览器使用它。导航到发起恶意请求的页面，并激活拦截请求（这可能需要一些练习，因为Burp Proxy可能是一个相当复杂的工具）。

现在执行用户操作，如果一切顺利，代理会拦截它并等待您的确认让其通过。这样做。然后您可能会看到第二个请求也被代理拦截了。不要让它通过，而是切换到Firebug并挂起到调试器中。希望您能够看到它来自哪里。编辑：经过再次思考，AJAX的异步性可能意味着您无法通过此方法看到确切的位置... :(

至少您还可以将其配置为拦截响应。请求和响应都可以即时编辑，这对于实验和调试可能非常有用，并有助于缩小问题范围。

- Arjan Tijms

Answer 5

这可能有所帮助，caller是javascript中Function对象中的一个方法。

console.log(arguments.callee.caller.toString());

- Ratna Dinakar