How To Get Stack Traces For Xhr Calls In A Browser?

Is there some way that I can get stack traces in a browser every time an HTTP request is made? I'm using Chrome dev tools, but I'll use a different tool, if there is one that can d

Solution 1:

If you are using firefox then use Firebug plugin. In firebug, you can easily see the stack of HTTP calls. You can easily see javascript code a put a breakpoint. when debugger stops on breakpoint, it shows the stack of operation it has done to reach till there. Read Firebug Tutorial

Solution 2:

You can remove the XMLHttpRequest support from browser by setting it undefined:

XMLHttpRequest = undefined

Then it will fail any time you try to use it - and throw an error you can use for the stack.

---

Or better replace send() method with own that will get the stack:

XMLHttpRequest.prototype.send = function() { 
    try {
        crash.me.now(); //make sure this is undefined
    }
    catch(err) {
        console.error(err.stack || err.stacktrace || err.stackTrace);
    }
}

Solution 3:

In chrome dev tools, you can see something like this if you capture a timeline activity.

First, open the dev tools, then go to "timeline" tab. It should be asking you to capture timeline. Hit ctrl-E and reload the page. After the page has loaded, press "finish" button.

Then go to the "network" tab, click on the ajax request you want to look at. At this point you should check that you have the overview visible: just below the tabs line, there is part that says "View:" and there you should toggle Overview on if it's not already.

Now you can select that part on the overview with your mouse like you were selecting text. Select the part of overview that has your ajax request.

Now, switch to the "timeline" tab. Make sure that on the "View" part you have toggled "flamechart" on. Now, there should be the javascript function calls visible. Unfortunately it seems that the names of function calls are truncated to an optimized form, but there are at least links to the js files that have those functions. Anyways, the topmost of the stack you are seeing should be the Event that triggered the XMLHttpRequest call.

Solution 4:

In Chrome devtools there is an options to set a "XHR breakpoint".

Once the send() request is fired, the code halts, the breakpoint is hit and then you can see the stacktrace normally similar to using code breakpoints.