捕获正在执行的特定javascript代码onClick

Question

我正在开发一个包含大量遗留javascript和jquery包含的网站，而且没有文档可以显示发生了什么。

我有一个特定的问题要修复，我找不到单击按钮时正在执行的相关代码。为了避免拖网浏览（并理解）数百行遗留脚本，是否有一个功能，可能在Firebug中，可以识别单击按钮时正在执行的脚本？

感谢您的帮助。

Answer 1

我相信Firebug的控制台窗口中有一个名为Profile的功能。单击配置文件，单击按钮，然后再次单击配置文件。它应该为您提供当时所有函数的调用。请注意，如果此代码包含jQuery，您可能会获得大量的函数列表，因为jQuery在其代码中使用了吨。不幸的是，探查器还会显示匿名函数，这真的很痛苦。

否则，在代码中搜索按钮的类或ID，然后浏览它们。如果您的ID为fancy，那么您可以在代码中搜索#fancy并尝试找到它。这可能会导致你进入一般方向，至少。

Answer 2

您可以单击Firebug的“下一个中断”按钮（在“脚本”选项卡中;它看起来像一个暂停按钮），然后按下要调试的按钮。

下次执行任何JavaScript代码时，Firebug会进入调试器并向您显示该行代码。

Answer 3

中断按钮对我不起作用。相反，我确实使用FireBug编辑了onclick属性，并在其中添加了“debugger”; ......一旦你点击，你就会在那里突破：）

Answer 4

上述答案都不适合我。我正在尝试使用Firebug来弄清楚页面上的某个功能如何为我无法控制的网站工作。这对我有用。

首先，从页面源获取我点击的元素的id，然后通过创建监视（在脚本选项卡下）获得对它的临时引用：

tmp=document.getElementById("idOfElement")

接下来，我将当前的onclick值分配给另一个临时变量。

oldfunc=tmp.onclick

接下来，我定义了一个新的onclick函数。最初我尝试将debugger;作为函数中的第一件事，但这不起作用！因此，我创建了一个警报：

tmp.onclick = function() { alert("Ok"); oldfunc() }

现在，只要我点击按钮，警报就会出现，然后我点击“打破下一个”按钮，如此问题的另一个答案中所述。然后我解除警报并立即在调试器中找到正确的位置。

在我的情况下，“Break on next”按钮本身不起作用，因为还有很多其他事件，只是鼠标悬停在页面上导致断点被击中，阻止我点击按钮。

Answer 5

在Firebug中，您可以在某些JS中设置断点，然后获得一个堆栈，它将让您知道当前的函数调用堆栈。因此，如果您在多个处理程序使用的函数中设置断点，那么您可以使用它来准确发现您所在的处理程序。

如果您正在处理AJAX回调等，这可能不会起作用。