如何找出哪个Javascript导致Ajax请求？

Question

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

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

Answer 1

在尝试答案中的建议时，我发现Firebug已经完全具备开箱即用的功能：Console选项卡显示所有请求，对于Ajax请求，它显示它们所源自的文件和行号，告诉我在哪里设置断点......

Answer 2

如果您的UI更新中有一些HTML更改，则可以使用Firebug设置Breakpoints on DOM (HTML) Mutation Events。

Answer 3

如果框架抽象出AJAX请求，您应该能够跟踪对抽象的调用。例如，jQuery允许通过其global AJAX event handlers。

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

Answer 4

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

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

现在执行用户操作，如果一切顺利，代理会拦截它并等待您的确认让它通过。做这个。然后你可能会看到第二个请求即将被代理截获。不要让这个通过，而是切换到Firebug并暂停到调试器中。希望你能够看到它的起源。编辑：第二个想法，AJAX的异步性质可能意味着你无法通过这种方法看到确切的位置... :(

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

Answer 5

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

的console.log（arguments.callee.caller.toString（））;