Where in JavaScript is the request coming from?

Question

I am debugging a large, complex web page that has a lot of JavaScript, JQuery, Ajax and so on. Somewhere in that code I am getting a rouge request (I think it is an empty img) that calls the root of the server. I know it is not in the html or the css and am pretty convinced that somewhere in the JavaScript code the reqest is being made, but I can't track it down. I am used to using firebug, VS and other debugging tools but am looking for some way to find out where this is executed - so that I can find the offending line amongst about 150 .js files.

Apart from putting in a gazzillion console outputs of 'you are now here', does anyone have suggestions for a debugging tool that could highlight where in Javascript requests to external resources are made? Any other ideas?

Step by step debugging will take ages - I have to be careful what I step into (jQuery source - yuk!) and I may miss the crucial moment

Answer 1

What about using the step-by-step script debugger in Firebug ?

I also think that could be a very interesting enhancement to Firebug, being able to add a breakpoint on AJAX calls.

Answer 2

If its a HTTPRequest sent to a web server, I would recommend using TamperData plugin on Firefox. Just install the plugin, start tamper data, and every request sent will be prompted to tamper/continue/abort first.

Visit this page at Mozilla website

Answer 3

You spoke of jQuery source...

Assuming the request goes through jQuery, put a debug statement in the jQuery source get() function, that kicks in if the URL is '/'. Maybe then you can tell from the call stack.

Answer 4

You can see all HTTP request done through JavaScript using the Firebug console.

If you want to track all HTTP requests manually, you can use this code:

$(document).bind('beforeSend', function(event, request, ajaxOptions)
{
   // Will be called before every jQuery AJAX call
});

For more information, see jQuery documentation on AJAX events.

Answer 5

Just a guess here, but are you using ThickBox? It tries to load an image right at the start of the code.

First thing I would do is check whether this rouge request is an Ajax request or image load request via the Net panel in Firebug.

If it's Ajax, then you can overload the $.ajax function with your own and do a strack trace and include the URL requested before handing off to the original $.ajax.

If it's an image, it's not ideal, but if you can respond to the image request with a server side sleep (i.e. php file that just sleeps for 20 seconds) you might be able to hang the app and get a starting guess as to where the problem might be.