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

Question

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

Answer 1

Chrome在您拥有的DevTool中使用Sources.

如果你打开它，你会在右侧看到XHR/fetch Breakpoints，如果你检查Any XHR你的脚本将在每个使用的请求时暂停XMLHttpRequest（所以任何不jsonp用于请求的请求）。

如果Any XHR选项不可用（仅No Breakpoints列出），则您必须单击+将Break when URL contains:字段留空并按 Enter。这将创建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() 来查看是谁调用了它。