追溯 javascript 调用答案

【问题标题】：Tracing back javascript calls追溯 javascript 调用
【发布时间】：2013-08-02 16:57:13
【问题描述】：

在我的 chrome 控制台中，我试图了解导致调用某些 javascript 文件的步骤是什么。确实，当我在单击输入文件标签后从计算机导入文件时，会调用一些 javascript 文件，但我不知道是哪个方法调用它。如何在调试器 (chrome-console) 中追溯它？

编辑：

我正在开发的插件在这里：http://blueimp.github.io/jQuery-File-Upload/。单击添加文件按钮时，文件load-image.min.js is called（在chrome调试器的部分网络中），我不知道它是如何准确调用的

【问题讨论】：

右边有一个部分显示当你在错误或断点处停止时的堆栈跟踪，这不是你需要的信息吗？
@Barmar 不完全是，事实上我现在注意到这个文件必须是一些 ajax 调用，因为我在调试器的网络部分看到它。但我不知道是什么触发了这个 ajax 调用...
它可能使用类似.loadScript()的东西。
@Barmar 是的，但我想在代码中本地化它（我正在开发一个插件，所以代码非常庞大......）
您能从“调用”神秘脚本的文件中发布相关的 sn-p 吗？

标签： javascript jquery javascript-debugger

【解决方案1】：

首先，要知道当您“调用”一个 JavaScript 文件（我认为您的意思是“导入”）时，不会固有地触发任何特定函数。如果您希望在加载时触发任何函数，则需要在 JavaScript 文件的全局空间中调用该函数。通常，这是通过创建单个自调用函数来完成的。例如，这段代码将定义一个名为 'foo' 的函数，并在 JavaScript 文件加载时调用它：

(function foo() {
   ...
})();

这也是可行的：

function foo() {
  ...
}
foo();

就 Chrome 开发者工具（使用 Ctrl+Shift+J 打开）而言，您有几个选择。最接近您描述的是“配置文件”工具。单击该选项卡，选择“收集 JavaScript CPU 配置文件”，然后为几个部分运行分析器。它将返回您的 CPU 执行的函数列表以及在这些函数中花费的时间。

【讨论】：

@MESSIAH 确实如此。事实上，我现在注意到这个文件一定是一些 ajax 调用，因为我在调试器的 network 部分看到它
所以您想知道特定脚本最终会如何加载到您的网页上？
我想本地化在我导入一些图像时调用这个文件的代码的和平。
对不起，我还不清楚用例。从一个 JavaScript 文件中，您正在导入一张图片，然后您注意到正在调用来自单独 JavaScript 文件的函数？
如果我没记错的话，你可能想知道 javascript 解释的幕后花絮。当 onclick,input file whatevr 被触发时究竟会发生什么...??

【解决方案2】：

如果您想捕获 AJAX 调用，请使用 Javascript 调试器的 XHR 断点 部分。单击 + 以添加断点，并在提示符中输入 load-image 以获取与 URL 匹配的字符串。

【讨论】：