Dan Ross February 2016

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 do this.

I suppose I could monkeypatch XMLHttpRequest to throw an error, but that is a fairly awkward solution.

I am trying to determine why an HTTP request was made, and being able to identify a high level function that led to that request would really help.

Answers


Shubham Dubey February 2016

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


Radek Pech February 2016

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);
    }
}


user19476 February 2016

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.

Post Status

Asked in February 2016
Viewed 1,457 times
Voted 10
Answered 3 times

Search




Leave an answer