How to find out the piece of code that initiated ajax request

Question

I have MVC view, in that tens of javascript files are included. there are some ajax requests initiated from the page. I would like to know from which particular js file the call was initiated.

I spent some time exploring Firefox addons - Firebug and HttpFox. Both are showing the http request, header , cookies and other hell lot of information, but nothing about the source where the ajax request was initiated.

Shreveport

Answer 1

I've been finding some of Chromes more recent debugging features very useful. Bring up the inspector(Ctrl+Shift+I) and switch to the Network tab before launching your application or performing the actions in question. Each http request will show the origin of the request in the Initiator column. If javascript initiated the request, it will show you the filename and line number with a clickable link to go straight to it.

Nielsen

Thanks for the help. unfortunately as we are using Jquery for ajax calls all the calls are shown from jquery file. – Shreveport

At least at this point it has quickly identified for you a good place in the jquery library file to throw a breakpoint so that you can look at the call stack in your debugger, as Musa suggests. – Nielsen

Answer 2

Another very good option in chrome developer tools is XHR Breakpoint. Press F12, Select the sources tab and on the right had side under XHR Breakpoint add a new conditional breakpoint condition by specifying the text you expect to find in the URL on which the ajax call is being made. It will stop on any ajax call which contains the text specified in the URL. You can give it a try on this URL (look for the heading Breakpoints on XHR)

Goulash