Question

我正在使用Firefox，但也可以使用Chrome，Opera等。因为在我们的JavaScript代码库中，我们有太多的行和源文件，我希望有一个工具来在调试器中通过其名称查找实际的函数声明。我的意思是我想在函数中设置断点，但根本不知道它在哪里。

例如，当我单击按钮时，以下脚本将进入：

$('#name_btn').invoke();

我不知道invoke()的定义位置。通过整个工作区搜索函数的名称（我使用Eclipse）*.js - 文件模式也没有得到任何有用的结果。

是否可以在浏览器内置的调试器中找到它？

Answer 1

在调试器中，在此行上设置断点：

$('#name_btn').invoke();

然后，当它到达该断点时，进入该功能。这将进入jQuery构造函数。退出该功能（这将带您回到同一行）。然后，再次介入。这将带您进入.invoke()功能，您可以看到源的来源。

如果多个步骤过于复杂，您可以通过将代码更改为：

来简化调试器操作

 var obj = $('#name_btn');
 obj.invoke();

在第二行设置断点。当它到达断点时，进入函数，你将进入invoke()方法。

仅供参考，Chrome调试器还有一个搜索功能，可以搜索所有已加载的JS文件，查找您想要查找的任何符号。

Answer 2

同样在Chrome工具中，您可以搜索来源：

enter image description here

Answer 3

在Firefox和Chrome中，您只需从控制台执行此操作：

debug($('#name_btn').invoke)

即。 debug(fn)将在函数fn入口点设置断点。无需寻找定义。（当然，除非你无法获得对该功能的引用。）

编辑：也确认了Chrome。

Answer 4

在Chrome的开发者控制台中：

$('#name_btn').invoke

或者（假设这些是$ .fn中的jquery函数）：

$.fn.invoke

在不调用函数的情况下键入函数并按Enter键，它将打印函数的源代码，以及从控制台右侧读取定义的文件。