To check if ajax call is synchronous or asynchronous in Browser Dev Tools

Question

Is there a way to confirm whether a particular ajax request in async or sync in Browser Dev Tools like Chrome Developer Tools or Firebug.

For ajax request HTTP Request Header does not indicate whether its sync or async.

X-Requested-With:XMLHttpRequest

Answer 1

no you cant do that but you can run this in console or add this to your code

XMLHttpRequest.prototype.open = (function(open){
    return function(method, url, async, user, password) {
        console.log("xhr call: "+url +"isAsync: "+async);
        open.apply(this, arguments);
    };
})(XMLHttpRequest.prototype.open);

it logs the infomation :D hope its helpful

Answer 2

I don't know if you are still looking for an answer but I hope this will help someone!

In chrome browser navigate to rightClick/inspect/networkTab/xhr? move the cursor to the time where your requests are processed as shown in below pic:

THIS IS MY ASYNC CODE(default ajax)

`$.ajax({
    type: "GET",
    contentType: "application/json",          // data type of request
    url: //url,
    data: //data,
    dataType: "json",                             // data type of response
    success: function (result) {  
        
        // some code here

    }

});`

I was making a series of ajax calls to the localhost and each call was linked to the previous call's response. But I got wrong outputs because all the ajax requests were being sent at almost the same time and the responses(blue in color) which should have been received serially were disordered. The timing diagram below shows the issue perfectly(look at the waterfall tab).

THIS IS MY CODE FOR SYNC CALLS(async: false in ajax)

$.ajax({
async: false,
type: "GET",
contentType: "application/json",          // data type of request
url: //url,
data: //data,
dataType: "json",                             // data type of response
success: function (result) {  

    // some code here

}

});

Now how to know if async: false is working?

You can see that the timings of ajax calls in async mode are overlapping each other and also the timings for calls in sync mode(async: false) are distinctively separate thus proving that sync calls [async: false] are working fine. If the timings still overlap then sync calls are likely not working, unlike my case.