Set a breakpoint in XHR in Chrome

drop down the chrome console (ctrl+shift+j) and type any of these:

Just rewrite the jquery ajax:

var prevajax = jQuery.ajax;jQuery.ajax = function () { debugger; return prevajax.apply(jQuery, arguments); };

or if you are not using jQuery, rewrite the xhr class:

var prevxhr = XMLHttpRequest;XMLHttpRequest = function (){debugger; prevxhr.apply(this, arguments);};

After it breaks, just press shift+f11 until you find the method which initiates the ajax request.

You can just set a breakpoint in the success callback and step through the debugger. To set a breakpoint:

1. Open "Developer Tools", and click the "Scripts" tab on the top.
2. Select the script that contains the success callback for your AJAX request.
3. Click the line number on the left hand side where you want the breakpoint. A blue arrow will show up indicating the breakpoint has been set.
4. Then make the AJAX request as you would, and the debugger will automatically stop at the breakpoint you set.

Alternatively, you can use the debugger statement to automatically invoke the debugger. So with this your success callback may look like:

success: function(data, textStatus, request) {    debugger; // pause execution and opens debugger at this point    ...}

Also checkout this nice article for debugging JavaScript.

However, the first approach is better as it doesn't require you to modify your code.

You can also go to scripts tab in developer tool, and on the right side you click on XHR Breakpoints and add new breakpoint with url filtering.

If you use jQuery, when breakpoint occurs you can use CallStack to find your function that called jQuery.ajax.