javascript - 如何找到调用某个函数的地方？

Question

我正在写一个网页，我需要做一些小改动。问题是，我需要找到调用某个函数的地方（有很多 JavaScript 文件，所以我无法逐行浏览它们）。你有什么想法，我怎么能找到它？

我知道如何在 Firebug 或类似的浏览器控制台中进行逐步调试，但我仍然不知道如何识别调用函数的位置。

我更喜欢在 Firefox 或 Chrome 中使用控制台。

score 2 · Accepted Answer

Chrome 的调试提示：

可能有多种方法可以找出变化的来源。但是在跟踪 DOM 中的更改时，我发现它可以节省时间。（这通常会引导我找到我正在寻找的功能）

打破subtree modification或attribute modifications。为此，请右键单击 DOM 树中的元素。特别是您认为正在应用更改的那个。从那里你会得到一个上下文菜单，它会给你这些选项。选择其中一个并设置 DOM 断点。

在此处输入图像描述

F11如果这触发了调试器，那么您可以通过使用和shift+ F11跳过函数继续逐步执行代码（如果您在 jQuery 之类的库中结束时很有用）。执行此操作时，请注意call stack. 这将告诉您代码来自哪里..

在此处输入图像描述

更深入的信息：

score 2 · Accepted Answer

要了解函数的调用者，只需在它的第一行设置一个断点。一旦断点被命中，您可以在调用它的堆栈跟踪中看到。

Firefox 开发工具 Firefox DevTools 调用堆栈中的调用者

萤火虫 Firebug中调用堆栈中的调用者

Chrome 开发者工具 Chrome DevTools 中调用堆栈中的调用者

score 1 · Accepted Answer

如果您有权访问脚本，则可以在要观看的每个函数的末尾添加：

console.trace()

这将在 Chrome 的控制台中输出已调用的函数及其在文件中的位置（行号）