AJAX:获取ajax调用javascript函数

6
有没有办法通过一些开发者工具(如 Chrome、Firefox、Opera 等)知道最后一个调用 AJAX 的函数是什么?这对于调试 Web 应用很有用。谢谢。

Firebug或Chrome开发者工具非常强大,用于调试Web应用程序,它们基本上拥有您所需的所有功能。 - x4rf41
“throws an AJAX call”是什么意思?是发起调用吗?(只有错误会被抛出)。你所说的“last function”是指最近在某个时间点上发起了一个Ajax调用的函数吗? - Felix Kling
@x4rf41 这位发帖者在询问如何做到,而不是能否做到。 - epascarello
我认为“throws”意味着“执行”。 - epascarello
5个回答

7
以下是我在Google Chrome中的操作步骤:
  1. 加载您的Web应用程序
  2. 按F12打开Chrome开发人员工具
  3. 转到Profiles选项卡
  4. 选择收集JavaScript CPU Profile
  5. Start
  6. 像平常一样使用您的Web应用程序
  7. 完成使用Web应用程序后,返回到开发人员工具并按Stop
因此,您将获得类似于下图所示的配置文件。该配置文件显示了在捕获配置文件期间进行的每个JavaScript调用,包括任何AJAX调用,以及调用发生的代码位置(哪个函数“抛出”调用)。
如您在另一张截图中所看到的,我从我的脚本(dash.js,第51行)启动了一个AJAX调用,从名为doOnSelectDate()的函数中呼叫,该函数本身是从getDailySummary()函数中定义的(第60行)。

这就是我一直在寻找的!!!抱歉我的英语不好,我只是想知道哪个函数执行Ajax...更好了吗? - MrViSiOn
没问题,我们都知道你的意思。你的英语很好。我很高兴你找到了你想要的东西。 - rodrigo-silveira

3

2

以下是在Firefox和Chrome中执行此操作的方法。我使用了W3Schools jQuery示例here,这样你就可以完全跟上我的步骤。

对于Firefox

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

如果你编写了自己的低级别AJAX函数,则此操作就足够了,并且将带你到源代码处。但由于大多数人使用的是jQuery minimized,因此你会得到jquery.min.js链接,这对你没有任何帮助。

Console with AJAX and link to source

如果您正在使用jquery.min.js,请在控制台中单击链接并在链接指定的行(第6行)设置断点。

Placing the breakpoint

现在再次触发 AJAX,它将停在断点处。点击堆栈选项卡,你的调用应该在其中某个位置。点击它,它会带你到源代码。

Finding source in stack trace

针对Chrome浏览器

打开设置并启用“记录XMLHttpRequests”

Log XMLHttpRequests setting

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

Finding the stack trace in the console


如何在Chrome中查看? - coding_idiot
添加了Chrome的说明。 - Dean Or

-1

你可以在Firefox中使用Firebug。它允许你在JavaScript代码中设置断点。

你可以点击Firebug的脚本选项卡,选择你的脚本文件并在所有AJAX调用处设置断点,以查看最后调用哪个AJAX。


-1

Google Chrome有开发者工具: 查看 -> 开发者 -> 开发者工具

你可能最感兴趣的是网络选项卡。

Firebug也非常适合调试,那里的控制台将显示您的ajax请求。 Firebug是Firefox的附加组件。


1
网络选项卡不会显示被调用的函数,它只会告诉你是否进行了Ajax调用。 - epascarello

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接