Set a breakpoint in XHR in Chrome

chrome debugger breakpoint
chrome xhr breakpoint
chrome breakpoints not working
chrome conditional breakpoint
react breakpoints chrome
chrome developer tools
add breakpoint to javascript in chrome
chrome debugger break on variable change

I have a page that sends an XHR request when a form is submitted and I would like to get Chrome to break when it receives a response. It seems like the best way to accomplish this would be if Chrome has a javascript function that I can call that breaks execution but I've been unable to find anything like that so far. Is there another solution?

Edit:

I don't actually have a callback defined for the request so I can't set a breakpoint that way. The request is being sent with this line of jquery code:

$.post(this.action, $(this).serialize(), null, "script");

where this is a form element. The null argument is where you would usually define a callback but with the "script" argument, raw javascript is returned by the server and then directly executed, so it seems the only way to break and step through the code is with the debugger; statement. This works, but when stepping through the code you can't actually see which line you are on so its a little awkward. I suspect that this is a limitation of Chrome's debugging tools.

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.

XHR Breakpoints, drop down the chrome console (ctrl+shift+j) and type any of these: Just rewrite the jquery ajax: var prevajax = jQuery.ajax; jQuery.ajax� Set a breakpoint in XHR in Chrome. Ask Question Asked 9 years, 11 months ago. Active 5 months ago. Viewed 19k times 21. 7. I have a page that sends an XHR 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.

Set a breakpoint in XHR in Chrome, XHR Breakpoints. Debugging ChromeFirebug Favorite. Within Chrome, it's possible to place� xhr breakpoints chrome (2) 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 .

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.

XHR Breakpoints, An XHR breakpoint will only execute a breakpoint when an XHR request log in Ajax you gonna get one all the success ones are if you put a debugger in. This tutorial only showed you two ways to set breakpoints. DevTools offers many other ways, including: Conditional breakpoints that are only triggered when the condition that you provide is true. Breakpoints on caught or uncaught exceptions. XHR breakpoints that are triggered when the requested URL matches a substring that you provide.

ES6+
XMLHttpRequest = (Parent =>
    class XMLHttpRequest extends Parent {
        constructor() {
            const onload = () => {
                this.removeEventListener('load', onload);
                debugger;
            };
            super(...arguments);
            this.addEventListener('load', onload);
        }
    }
)(XMLHttpRequest);
ES5
XMLHttpRequest = (function (Parent) {
    XMLHttpRequest.prototype = Parent;

    return XMLHttpRequest;

    function XMLHttpRequest() {
        var self = this;
        Parent.apply(this, arguments);
        this.addEventListener('load', function () {
            self.removeEventListener('load', onload);
            debugger;
        });
    }
})(XMLHttpRequest);

This should let you inspect the request/response in the Network developer tool.

Note 01

ES5 syntax IS NOT to be understood as ES5+ mainly because function extends class ... isn't something that works at runtime. The class part will fail with Uncaught TypeError: Failed to construct 'XMLHttpRequest': Please use the 'new' operator. At that point, you may consider changing :

Parent.apply(this, arguments);

into

super(...arguments);

Note 02

Every solution here supposes that the library that issue the XHR request did not cache the XMLHttpRequest constructor [yet].

Note 03

The above code does not work with ES5 especially b/c of supper vs. .prototype inheritance syntax.

In order to circumvent thes issues, one may tap into the prototype. In the following code, I choosed to tap into the the xhr.send method.

ES5+
XMLHttpRequest.prototype.send = (function (send) {
    return function () {
        this.addEventListener('load', function onload() {
            this.removeEventListener('load', onload);
            debugger;
        });

        return send.apply(this, arguments);
    };
})(XMLHttpRequest.prototype.send);

That said, the latter code didn't work for the issue that had me dig into this... Mainly because the internal Angular code registered an event listener (that fully redirects the browser) before even calling the xhr.send method. Not great, eh !?

That's it!

Learn Conditional & XHR Breakpoints – Mastering Chrome , An XHR breakpoint will only run a breakpoint when an XHR … So you're like, I wanna put a breakpoint right where I call users.name to see what users does� To set an XHR breakpoint: Click the Sources tab. Expand the XHR Breakpoints pane. Click Add breakpoint. Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR request URL. Press Enter to confirm. Figure 6. Creating an XHR breakpoint in the XHR Breakpoints for any request that contains org in

Javascript Debugging Tips and Tricks using the Chrome Dev Tools, Javascript debugging tips using the Chrome Dev Tools, deb.js and more Choose a source and set up a breakpoint by clicking on the line number: On the sources tab there is an XHR breakpoint section, where it's possible� Debugging Chrome Firebug Favorite. Within Chrome, it's possible to place a breakpoint on a XmlHttpRequest allowing you to debug AJAX requests. You can add a breakpoint by going to the "Sources" tab and selecting "XHR Breakpoints". Click the plus icon and type part or all of the URL you wish to add a breakpoint for.

How to debug Javascript in Chrome quick and easy, Via Event Listener Breakpoints, you can set breakpoints at a variety of event types such as Keyboard, Touch, and XHR. From the Event Listener Breakpoints section, you see that you can add breakpoints for a lot of events, including touch, keyboard and XHR. The debugger key word When you put the keyword debugger anywhere in your JavaScript code, the execution of that code will stop at that line and the chrome dev tools will be openned, highlighting the line

Tips and Tricks for Debugging in Chrome Developer Tools, You can set XHR/fetch breakpoints in the Sources tab, on the right side anytime a url contains a specific string or on any XHR/fetch request. You can break on all requests or on those that include a specific URL. To turn on the feature: Open the debugger; Click on "Pause on any URL" which acts as a wild card, causing the code to pause on any call, or, Click the plus sign next to the XHR breakpoints header, enter the URL in which you are interested, and press Enter.

Comments
  • I don't get it. If you null the callback, wouldn't all response be ignored? Where did you want the debugger to break at?
  • xhr = new XMLHttpRequest Uncaught TypeError: Failed to construct 'XMLHttpRequest': Please use the 'new' operator, this DOM object constructor cannot be called as a function. at new XMLHttpRequest (<anonymous>:2:48) at <anonymous>:1:7
  • Thank you for the well thought out answer. The debugger statement definitely got me a lot closer. I edited my question to clarify that I don't actually have a callback function defined so setting a breakpoint with debugger seems to be the only option.