在Chrome中查找JavaScript函数定义

Chrome的开发者工具摇滚，但他们似乎没有（我能find）的一件事是find一个JavaScript函数的定义的一种方法。 这对我来说是非常方便的，因为我正在一个包含许多外部JS文件的网站上工作。 当然，grep解决了这个问题，但是在浏览器中会好很多。 我的意思是，浏览器必须知道这个，为什么不公开它呢？ 我的预期是这样的：

• 从页面中select“检查元素”，这会突出显示“元素”选项卡中的行
• 右键单击该行并select“转到函数定义”
• 正确的脚本被加载到脚本标签中，并跳转到函数定义

首先，这个function是否存在，我只是想念它？

如果没有，我猜这将来自WebKit，但找不到任何开发工具function请求或WebKit的Bugzilla 。

Answer 1

假设我们正在寻找名为foo函数：

1. （打开Chrome开发工具），
2. Windows： ctrl + shift + F或macOS： cmd + optn + F。 这将打开一个search所有脚本的窗口。
3. 选中“正则expression式”checkbox，
4. searchfoo\s*=\s*function （在这三个令牌之间使用任意数量的空格searchfoo = function ），
5. 按下返回的结果。

函数定义的另一个变体是function\s*foo\s*\(对于function foo(在这三个标记之间有任意数量的空格）。

Answer 2

这在Chrome上登陆2012-08-26不知道确切的版本，我注意到它在Chrome 24。

截图是值得一百万字：

我正在使用控制台中的方法检查对象。 点击“显示函数定义”将我带到函数定义的源代码中。 或者我可以将鼠标hover在function () {单词在工具提示中看到函数体。 你可以很容易地检查整个原型链像这样！ CDT绝对摇滚！

希望大家都觉得有用！

Answer 3

您可以通过在控制台中评估它的名称来打印该function，如下所示

 > unknownFunc function unknownFunc(unknown) { alert('unknown seems to be ' + unknown); } 

这对内置函数不起作用，它们只会显示[native code]而不是源代码。

编辑 ：这意味着该函数已被定义在当前范围内。

Answer 4

2016更新 ：Chrome版本51.0.2704.103

有一个Go to member快捷方式（列在settings > shortcut > Text Editor ）：

按Ctrl + Shift + O

或在OS X中：

⌘ + shift + O

这使得能够列出并到达当前文件的成员。

Answer 5

导航到函数定义位置的另一种方法是在debugging器中打开某个可以访问该函数的位置，然后在控制台中input函数完全限定的名称。 这将打印控制台中的函数定义，并给出一个链接，点击打开脚本位置的function定义。

http://j.mp/1bfPfik

Answer 6

不同的浏览器做这个不同。

1. 首先打开控制台窗口，右键单击页面并select“检查元素”，或按F12 。

2. 在控制台中，input…

   • 火狐

      functionName.toSource() 

   • 铬

      functionName