如何找出哪个JavaScript引起了jQuery Ajax请求？

Question

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

- Stranger

---

如果您使用Chrome浏览器，只需在控制台中打开XMLHttpRequests日志记录。 - ryanc1256

取决于你想要做什么。可以像Nirus所说的那样，也可以始终使用未压缩版本的jQuery，并在请求发生的位置设置断点，或者使用Chrome的XHR断点，然后您就可以看到整个调用堆栈。 - t.niese

我希望我们无法使用JavaScript调试jQuery API实现。 - Hariharan

@Hariharan，为什么这不可能呢？ - t.niese

@Udhay 在开发工具中使用Chrome，你可以在右侧看到Sources，如果你勾选了Any XHR，你的脚本将会在每个使用XMLHttpRequest的请求处暂停（所以任何不使用jsonp进行请求的请求都会被暂停）。通过Call Stack（也在右侧），你可以看到请求的来源。 - t.niese

Answer 1

在你的DevTool中使用Chrome, 打开 Sources 选项卡，右侧将会看到XHR / fetch断点, 如果选中Any XHR，则您的脚本会在每个使用XMLHttpRequest的请求处暂停（因此不使用jsonp进行请求的每个请求都会暂停）。

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

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

但是，正如我所提到的，如果要跟踪jsonp请求，则需要使用未压缩版本的jQuery（或包含压缩版本的sourcemap），并在其源代码中设置断点正确的部分。要找到此部分，可以执行以下步骤：

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

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

- t.niese

---

我没有看到任何XHR复选框。它在后来的Chrome版本中被移除了吗？ - Tony_Henrich

@Tony_Henrich 它仍然存在于最新的Chrome版本（55.0.2883.95）。 - t.niese

如果您已经解决了这个问题，那么这条评论是给未来想要找到答案的人的。点击“+”按钮或右键单击并点击“添加断点”，然后在字段为空时按Enter，它将自动填充“任何xhr”复选框。 - Yasmin French

@YasminFrench 谢谢您提供的信息，我已经更新了我的答案。我不知道我以前是否需要这样做，可能是因为某些版本的Chrome需要，而且由于它已经存在于我的设置中，所以一直保留至今。 - t.niese

Answer 2

在早期的Chrome版本中可能没有这个功能，但是在版本56.0.2924.87中增加了一个“初始化程序”列，告诉您发起请求的html / js文件以及该文件内准确的行。

这个请求可以是XHR，jpg，css或其他任何请求。

非常流畅和有帮助的追踪请求的方法如下：

1. 按"F12"打开开发人员工具。
2. 查找每个请求中的“初始化程序”列，您可以看到“jquery.min.js：4”，这意味着该请求是从文件“jquery.min.js”的第4行启动的。

- Punit S

---

这并不总是有效，因为有时Chrome会报告“其他”。 - cjbarth

虽然不相关，但IE有一个很好的启动按钮！ - SIslam

Answer 3

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

- sivann

---

据我理解，您想找出哪个事件触发了Ajax请求。这样您就可以找到调用它的函数。或者我理解错了吗？ - sivann