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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17208268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 18:38:20  来源:igfitidea点击:

How to find out which Javascript causes a jQuery Ajax request?

javascriptjquery

提问by Stranger

How to find the Javascript code from where a Ajax request triggered? In Firebug's console we are able to identify the file and line number, but if we're using $.ajaxor $.postor some similar function of jQuery, it will only log the jQuery library file in Firebug's console. Is there any way to get the actual trigger point of the jQuery function?

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

回答by t.niese

Use Chromein the DevToolyou have Sources.

Chrome在您拥有的DevTool 中使用Sources

If you open this you will see on the right side XHR/fetch Breakpoints, if you check Any XHRyour script will pause at every request that uses XMLHttpRequest(so ever request that does not use jsonpfor requests).

如果你打开它,你会在右侧看到XHR/fetch Breakpoints,如果你检查Any XHR你的脚本将在每个使用的请求处暂停XMLHttpRequest(所以请求不jsonp用于请求)。

If the Any XHRoptions are not available (only No Breakpointsis listed) then you have to click on the +leave the Break when URL contains:field blank and hit enter. This will create the Any XHRoption. (Thanks to Yasmin Frenchfor this info)

如果Any XHR选项不可用(仅No Breakpoints列出),则您必须单击+Break when URL contains:字段留空并按 Enter。这将创建Any XHR选项。(感谢Yasmin French提供此信息)

With the Call Stack(also on the right side) you will see what the origin of the request was.

使用Call Stack(也在右侧),您将看到请求的来源。

But as I mentioned this does not break on jsonprequests if you want to trace these you need to use the not minified version of jQuery(or include the sourcemap of the minified version) and set a breakpoint in its source at the correct part. To find this part you can use the following steps:

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

  1. Create a jsonprequest in your code and set a breakpoint at this place.
  2. Call this part of your code so that you switch to the debugger.
  3. Use the Step into, now you should be in the jQuery code. If you now place a breakpoint there, Chrome will stop for every jsonprequest.
  1. jsonp在您的代码中创建一个请求并在此位置设置断点。
  2. 调用这部分代码,以便切换到调试器。
  3. 使用Step into,现在您应该在 jQuery 代码中。如果您现在在那里放置一个断点,Chrome 将针对每个jsonp请求停止。

A note: Sometimes Chrome(probably only in the betaor devversions) tends to lose the breakpoints on reloading, so you need to check if they still exist on reload.

注意:有时Chrome(可能仅在betadev版本中)在重新加载时往往会丢失断点,因此您需要检查它们在重新加载时是否仍然存在。

回答by Punit S

This may not have existed in earlier Chrome versions, but Version 56.0.2924.87 has an 'Initiator' column that tells the html/ js file and exact line within that file that initiated the request.

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

This request can be XHR, http request for jpg, css or anything else.

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

Pretty sleek and helpful in tracing back requests.

非常时尚,有助于追溯请求。

Here's how to use it?

这里是如何使用它?

  1. Press "F12" to open the developer console.
  2. Look for "Initiator" column in each request, you can see "jquery.min.js:4", which means the request was initiated from the 4th line of the file "jquery.min.js".
  1. 按“F12”打开开发者控制台。
  2. 在每个请求中查找“Initiator”列,可以看到“jquery.min.js:4”,表示请求是从文件“jquery.min.js”的第4行发起的。

enter image description here

在此处输入图片说明

回答by sivann

In chrome and firefox/firebug you may use console.trace() on the .always()or perhaps on the beforeSend handler of your ajax call to see who called it.

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