Question

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

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

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

Answer 1

Chrome调试提示：

您可以通过多种方式找出变更的来源。但是，在追踪DOM的变化时，我发现这个节省时间。（通常会将我引导到我正在寻找的功能）

中断 subtree modification 或 attribute modifications 。要执行此操作，请右键单击DOM树中的元素。特别是您认为应用更改的那个。从那里您将获得一个上下文菜单，它将为您提供这些选项。选择一个设置DOM断点。

enter image description here

如果这会触发调试器，则可以使用 F11 和 shift + F11 跳过函数来逐步执行代码（如果你在像jQuery这样的库中结束很有用。执行此操作时，请注意 call stack 。这将告诉您代码的来源..

enter image description here

更深入的信息：

Answer 2

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

Firefox DevTools Caller within call stack in Firefox DevTools

<强>萤火虫 Caller within call stack in Firebug

Chrome DevTools Caller within call stack in Chrome DevTools

Answer 3

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

console.trace()

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