如何找出哪个 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
How to find out which Javascript causes a jQuery Ajax request?
提问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 $.ajax
or $.post
or 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 Chrome
in 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 XHR
your script will pause at every request that uses XMLHttpRequest
(so ever request that does not use jsonp
for requests).
如果你打开它,你会在右侧看到XHR/fetch Breakpoints
,如果你检查Any XHR
你的脚本将在每个使用的请求处暂停XMLHttpRequest
(所以请求不jsonp
用于请求)。
If the Any XHR
options are not available (only No Breakpoints
is listed) then you have to click on the +
leave the Break when URL contains:
field blank and hit enter. This will create the Any XHR
option. (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 jsonp
requests 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
(或包含缩小版本的源映射)并在其源中的正确部分设置断点。要找到这部分,您可以使用以下步骤:
- Create a
jsonp
request in your code and set a breakpoint at this place. - Call this part of your code so that you switch to the debugger.
- Use the
Step into
, now you should be in the jQuery code. If you now place a breakpoint there, Chrome will stop for everyjsonp
request.
jsonp
在您的代码中创建一个请求并在此位置设置断点。- 调用这部分代码,以便切换到调试器。
- 使用
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(可能仅在beta或dev版本中)在重新加载时往往会丢失断点,因此您需要检查它们在重新加载时是否仍然存在。
回答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?
这里是如何使用它?
- Press "F12" to open the developer console.
- 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".
- 按“F12”打开开发者控制台。
- 在每个请求中查找“Initiator”列,可以看到“jquery.min.js:4”,表示请求是从文件“jquery.min.js”的第4行发起的。
回答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()来查看谁调用了它。