AJAX: Getting ajax call javascript function

Question

Is there any way to know (with some developers tools: chrome, Firefox, Opera, etc) what is last function that fires an AJAX call?

It would be interesting for debugging web apps.

Thank you

Answer 1

Here's how I do it in Google Chrome:

1. Load your web app
2. Press F12 to open Chrome Developer Tools
3. Go to the Profiles tab
4. Select Collect JavaScript CPU Profile
5. Press Start
6. Use your web app as you normally would
7. When you're done using the web app, go back to Developer Tools and press Stop

As a result, you'll get a profile similar to the one shown in the picture below. This profile shows every JavaScript call made during the time you were capturing the profile, including any AJAX calls, as well as where in your code the call was made (which function "threw" the call).

As you can see in this other screenshot, I had an AJAX call fired from my script (dash.js, line 51), from a function called doOnSelectDate() , which was itself called from a function called getDailySummary() (defined on line 60).

Answer 2

Look at console.trace() , it will give you the stack info you are after.

Answer 3

Here's how to do this in Firefox and Chrome. For both I used W3Schools jQuery example here so you can follow along exactly.

For Firefox.

Trigger the event that calls the AJAX. Open up Firebug console and click the source link.

If you wrote your own low level AJAX function this will be enough and will take you to your source. But since most people will be using jQuery minimized you get the jquery.min.js link which is no help.

If you are using jquery.min.js, click on the link in the console and set a breakpoint at the line specified in the link (line 6).

Now trigger the AJAX again and it will stop at the breakpoint. Click on the stack tab and your call should be somewhere in there. Click on it and it will take you to the source.

For Chrome

Open settings and enable "Log XMLHttpRequests"

Run your AJAX again and it will appear in the console. Expand it to see the stack trace.

Answer 4

you can use firebug in firefox. It allows you to have breakpoints in javascript code.

You can click on the script tab of firebug and select your script file and provide breakpoints at all AJAX calls and see which AJAX is being called last.

Answer 5

Google chrome has developer tools: view -> developer -> developer tools

you are probably most interested in the network tab.

Firebug is also really good for debugging and the console there will show you the ajax requests. Firebug is a firefox addon.