CODEWITHSUNDEEP
javascriptajaxdebuggingfirebug
rajakvk
rajakvk

Reputation: 10123

How to find which javascript code fired ajax?

Is there any quick way to find out which javascript code (file name and exact line) fired a particular ajax call?

Using firebug i can locate the ajax call but finding out the exact line quickly will help to debug

Thanks in advance for any help

Upvotes: 2

Views: 953

Answers (4)

Simon Lindholm
Simon Lindholm

Reputation: 2376

In Firebug you can either click the source link in the Console panel:

console xhr source link

or set a breakpoint in the Net panel:

net xhr breakpoint

Upvotes: 3

fflorent
fflorent

Reputation: 1646

I don't really know any clean method (maybe there exists one). But I have a little hack to propose.

If you are not using Prototype.js in your webpage, enter these commands in the command line (with Firebug 1.11): 

window.old$ = $; // in case you're using a framework like jQuery
include("https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"); // loads Prototype

The console should print: prototype.js properly included.

Then, to restore your old "$" variable, type:

window.$ = window.old$;

Now that Prototype is loaded, we can wrap the XMLHttpRequest.prototype.open function, so we can get the call stack (just like suggested dystroy):

XMLHttpRequest.prototype.open = XMLHttpRequest.prototype.open.wrap(function(orig, ...args)
{
    console.log("trace for :"+args[1]); // prints the URL of the request
    console.trace(); // prints the stack trace
    orig.apply(null, args); // call the original function
});

And that's it.

N.B.: if the request is launched at start:

  • in the Script panel, set a breakpoint on the first JS instruction of your webpage
  • execute the commands above in the Console panel
  • go back to the Script panel, and click on continue

Upvotes: 1

Gnagno
Gnagno

Reputation: 607

what I usually do is adding a bunch of:

console.log("message that explains where in the code I am now...");

but pay attention, because console.log can create problems with older version of IE, you have to remove all console.log calls when you go in production.

Upvotes: -1

Denys Séguret
Denys Séguret

Reputation: 382150

If you put a breakpoint in your code at the point of this ajax call, the debugger will show you the stack of function calls.

See this from Chrome developer tools documentation :

enter image description here

Upvotes: 2

Related Questions