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

Question

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?

Answer 1

Use Chrome in the DevTool you have 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).

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 French for this info)

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

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:

1. Create a jsonp request 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 jsonp request.

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

Answer 2

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.

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

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".