在Chrome中查找JavaScript函数定义

Question

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

• 从页面中选择“检查元素”，突出显示“元素”选项卡中的行
• 右键单击该行，然后选择“转到功能定义”
• 在“脚本”选项卡中加载了正确的脚本，它将跳转到函数定义

首先，这个功能是否存在，我只是错过了它？

如果没有，我猜这会来自WebKit，但找不到Developer Tool feature requests或WebKit's Bugzilla的任何内容。

Answer 1

让我们说我们正在寻找名为 foo 的功能：

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

函数定义的另一个变体是{strong> function\s*foo\s*\( ，function foo(，这三个标记之间有任意数量的空格。

Answer 2

这landed in Chrome on 2012-08-26 我不确定确切的版本，我在Chrome 24中注意到了它。

屏幕截图价值一百万字：

我正在使用Console中的方法检查对象。单击“显示函数定义”将我带到源代码中定义函数的位置。或者我可以将鼠标悬停在function () {字上以查看工具提示中的函数体。你可以像这样轻松检查整个原型链！ CDT肯定会摇滚!!!

希望你们都觉得它有用！

Answer 3

您可以通过在控制台中评估它的名称来打印该功能，如此

> 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中列出）。打开包含您的功能的文件（在DevTools的sources面板中），然后按：

  

ctrl + shift + O

或在OS X中：

  

⌘ + shift + O

这样可以列出并覆盖当前文件的成员。

Answer 5

导航到函数定义位置的另一种方法是在调试器中断，您可以访问该函数并在控制台中输入函数完全限定名称。这将在控制台中打印函数定义，并提供一个链接，在单击时打开定义函数的脚本位置。

Answer 6

不同的浏览器以不同的方式执行此操作。

1. 首先打开控制台窗口，右键单击页面并选择＆＃34;检查元素＆＃34;或点击 F12 。

2. 在控制台中，键入...

   • 火狐

     functionName.toSource()
     

   • 铬

     functionName
     

Answer 7

我发现找到全局函数的最快方法就是：

1. 选择来源标签。
2. 在观看窗格中，点击 + ，然后输入窗口
3. 您的全局函数引用按字母顺序排在第一位。
4. 右键单击您感兴趣的功能。
5. 在弹出菜单中选择显示功能定义。
6. 源代码窗格切换到该功能定义。

Answer 8

在Chrome控制台中：

debug(MyFunction)
MyFunction()

Answer 9

如果您已经在调试，则可以将鼠标悬停在函数上，并且工具提示将允许您直接导航到函数定义：

进一步阅读：

• Chrome DevTools > JavaScript Debugging Reference

Answer 10

我在寻找对象方法的来源时遇到了类似的问题。对象名称为myTree，其方法为load。我在调用该方法的行上放置了一个断点。通过重新加载页面，执行在此时停止。然后在DevTools控制台上，输入对象以及方法名称，即myTree.load，然后按Enter键。方法的定义已打印在控制台上：

此外，通过右键单击定义，您可以在源代码中转到其定义：

Answer 11

在Google chrome中，检查元素工具可以查看任何Javascript函数定义。

1. 单击“源”选项卡。然后选择索引页面。搜索 功能。

1. 选择功能，然后右键单击功能并选择 “在控制台中评估选定的文本。”