如何找出导致 jQuery Ajax 请求的 Javascript？

Question

如何找到触发 Ajax 请求的 Javascript 代码？在 Firebug 的控制台中我们可以识别文件和行号，但是如果我们使用$.ajax 或$.post 或 jQuery 的一些类似功能，它只会在 Firebug 的控制台中记录 jQuery 库文件。有什么办法可以得到jQuery函数的实际触发点？

Answer 1

在你拥有Sources的DevTool中使用Chrome。

如果您打开它，您将在右侧看到XHR/fetch Breakpoints，如果您选中Any XHR，您的脚本将在每个使用XMLHttpRequest 的请求时暂停（因此任何不使用jsonp 的请求） .

如果Any XHR 选项不可用（仅列出No Breakpoints），那么您必须单击+ 将Break when URL contains: 字段留空并按回车键。这将创建Any XHR 选项。 （感谢Yasmin French 提供此信息）

使用Call Stack（也在右侧），您将看到请求的来源。

但正如我所提到的，这不会在jsonp 请求上中断，如果您想跟踪这些请求，您需要使用jQuery 的未缩小版本（或包含缩小版本的源映射）并在其中设置断点来源在正确的部分。要找到这部分，您可以使用以下步骤：

1. 在您的代码中创建jsonp 请求并在此位置设置断点。
2. 调用这部分代码以便切换到调试器。
3. 使用Step into，现在您应该在jQuery 代码中。如果您现在在此处设置断点，Chrome 将针对每个 jsonp 请求停止。

注意：有时 Chrome（可能仅在 beta 或 dev 版本中）在重新加载时往往会丢失断点，因此您需要检查它们在重新加载时是否仍然存在。

Answer 2

这在早期的 Chrome 版本中可能不存在，但版本 56.0.2924.87 有一个“Initiator”列，它告诉 html/js 文件以及该文件中发起请求的确切行。

此请求可以是 XHR、对 jpg、css 或其他任何内容的 http 请求。

非常简洁，有助于追溯请求。

这里是如何使用它？

1. 按“F12”打开开发者控制台。
2. 在每个请求中查找“Initiator”列，可以看到“jquery.min.js:4”，表示请求是从“jquery.min.js”文件的第4行发起的。

Answer 3

在 chrome 和 firefox/firebug 中，您可以在 .always() 或您的 ajax 调用的 beforeSend 处理程序上使用 console.trace() 来查看是谁调用了它。