AJAX:获取AJAX调用javascript函数

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

有什么方法可以知道(使用一些开发工具:chrome、Firefox、Opera等)最后一个触发AJAX调用的函数是什么?

It would be interesting for debugging web apps.

调试web应用程序会很有趣。

Thank you

谢谢你！

5 个解决方案

#1

Here's how I do it in Google Chrome:

下面是我在谷歌Chrome中的做法:

1. Load your web app
2. 加载您的web应用程序
3. Press F12 to open Chrome Developer Tools
4. 按F12打开Chrome开发工具
5. Go to the Profiles tab
6. 转到Profiles标签
7. Select Collect JavaScript CPU Profile
8. 选择Collect JavaScript CPU配置文件
9. Press Start
10. 按下开始
11. Use your web app as you normally would
12. 像平常一样使用你的网络应用
13. When you're done using the web app, go back to Developer Tools and press Stop
14. 当您使用完web应用程序后，回到开发工具并按下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).

因此，您将得到一个类似于下图所示的概要文件。这个概要文件显示了在捕获概要文件期间进行的所有JavaScript调用，包括任何AJAX调用，以及在代码中调用的位置(函数“抛出”调用)。

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).

正如您在这个屏幕截图中看到的，我从脚本(dash)中触发了一个AJAX调用。从一个名为doOnSelectDate()的函数中调用，它本身是从一个名为getDailySummary()的函数调用的(在第60行定义)。

#2

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

查看console.trace()，它将提供您所需要的堆栈信息。

#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.

以下是如何在Firefox和Chrome中实现这一点的方法。对于这两个，我在这里使用了W3Schools jQuery示例，这样您就可以准确地跟踪了。

For Firefox.

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

触发调用AJAX的事件。打开Firebug控制台并单击source链接。

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.

如果您编写了自己的低级别AJAX函数，这就足够了，并将您带到源代码中。但是由于大多数人都会使用jQuery最小化，所以你会得到jQuery .min。js链接没有帮助。

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).

如果您正在使用jquery.min。js，单击控制台中的链接，在链接中指定的行上设置断点(第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.

现在再次触发AJAX，它将在断点处停止。单击stack选项卡，您的调用应该在其中的某个位置。点击它，它将带你到源。

For Chrome

Open settings and enable "Log XMLHttpRequests"

打开设置并启用“日志xmlhttprequest”

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

再次运行AJAX，它将出现在控制台。展开它以查看堆栈跟踪。

#4

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

你可以在firefox中使用firebug。它允许在javascript代码中使用断点。

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.

您可以单击firebug的script选项卡，选择您的脚本文件，并在所有AJAX调用中提供断点，然后查看最后调用哪个AJAX。

#5

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

谷歌chrome有开发工具:视图->开发人员->开发工具。

you are probably most interested in the network tab.

您可能对network选项卡最感兴趣。

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

Firebug也非常适合调试，控制台将向您显示ajax请求。Firebug是一个firefox插件。