在 Chrome 中查找 JavaScript 函数定义答案

【问题标题】：Find JavaScript function definition in Chrome在 Chrome 中查找 JavaScript 函数定义
【发布时间】：2012-04-07 09:41:15
【问题描述】：

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

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

首先，这个功能是否存在而我只是想念它？

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

【问题讨论】：

脚本选项卡中有一个搜索当前文件的搜索栏，您可以通过打印来查看函数的内容。但是，如果有一种方法可以像您想要的那样进行更一般的搜索，我现在很好奇......
使用 Google Chrome 开发者工具，在“源”点击 -> 右侧窗口，您必须设置“事件断点”。
在我的例子中，我有一个变量设置为一个未知函数。我做了 myvar.toString() 并打印了：“function Object() { [native code] }”，这就是我需要知道的。

标签： javascript google-chrome-devtools

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

进一步阅读：

Chrome DevTools > JavaScript Debugging Reference

【讨论】：

【解决方案3】：

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

一张截图值一百万字：

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

希望对大家有所帮助！

【讨论】：

是否有快捷方式或函数允许通过函数引用进行搜索？像“>检查（document.body）”。现在我必须 d > tmp={a:myFunc}; >tmp，后跟“显示函数定义”
我认为你可以做到dir(myFunc)
dir(myFunc) 好多了，但还是需要点击两下鼠标
哦，你的意思是如果你可以完全用键盘来做？像findDefinition(myFunc) 这样的东西？尚不存在的 AFAIK...
奇怪的是，单击显示函数定义对我没有任何作用。无响应。

【解决方案4】：

在谷歌浏览器中，Inspect element 工具可以查看任何 Javascript 函数定义。

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

选择函数然后右键单击该函数并选择 “在控制台中评估选定的文本。”

【讨论】：

【解决方案5】：

在 Chrome 控制台中：

debug(MyFunction)
MyFunction()

【讨论】：

我喜欢这样。值得注意的是：再次执行undebug(MyFunction) 删除断点（找到方法实现后）

【解决方案6】：

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

【讨论】：

【解决方案7】：

2016 年更新：Chrome 版本 51.0.2704.103

有一个Go to member 快捷方式（在settings > shortcut > Text Editor 中列出）。打开包含您的函数的文件（在 DevTools 的 sources 面板中）并按：

ctrl + shift + O

或在 OS X 中：

⌘ + shift + O

这可以列出和访问当前文件的成员。

【讨论】：

好吧，这似乎不是“去定义”任意函数调用，而是“向你显示当前文件中的所有函数名称并让你去它们” - 这是也挺有用的。
这正是我要找的，一个类似于firefox的功能！在Firefox中，您只需打开开发工具，按Ctrl+f，它将在所有窗格（HTML/CSS/Javascript/等）中搜索JS函数。这样做，与其他答案中提到的正则表达式功能不同。
@Randy，在哪个版本的 chrome 上？哪个操作系统？我在 OS X 上使用 Chrome 版本 59.0.3071.115，它运行良好。
@Black 只是为了确保： 1. 在开发工具的源面板中，关注（单击）要查找函数的源文件。 2. 是字母“O”，而不是数字“0”。
@Protectorone，是的

【解决方案8】：

我发现查找全局函数的最快方法很简单：

选择来源标签。
在 Watch 窗格中单击 + 并输入 window
您的全局函数引用按字母顺序排列在最前面。
右键单击您感兴趣的功能。
在弹出菜单中选择显示函数定义。
源代码窗格切换到该函数定义。

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

这就是我要说的！我什至不知道该窗格存在 - 你会怎么做？
这只是定义名为 foo 的函数的一种方法。还有其他的。如果我们的功能是例如bar['foo']? （据我所知，这个问题没有好的答案——本质上是“不要编写复杂的代码”）
我无法使用所选答案找到“函数定义”。我在谷歌上搜索过，找不到任何帮助。（使用 Chrome 版本 41.0.2272.118 m）
然后你找不到函数声明、动态生成的函数表达式和匿名（未命名）函数。我宁愿想要 Firefox 之类的东西：单击监视面板中的函数引用 -> 跳转到函数引用。
答案似乎已经过时，如果我在开发者控制台中单击该组合键，则没有任何反应。

【解决方案10】：

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

首先通过右键单击页面并选择“检查元素”或按 F12 打开控制台窗口。
在控制台中，键入...
- 火狐
```
functionName.toSource()
```
- 铬
```
functionName
```

【讨论】：

我正在搜索的函数是 stop()，它被用作 onmouseover="this.stop();"当我按照你说的做时，它会返回：stop() { [native code] } 那么现在该怎么办？
functionName.toSource() 也适用于最新的 chrome 版本。
@Tarik 查看内置stop 的在线文档。
@QPaysTaxes 谢谢，我现在明白当它返回时： stop() { [native code] } 那里 native code 表示它不是私有函数，它是内部的函数，我应该查找该函数的在线文档。

【解决方案11】：

您可以通过在控制台中评估函数的名称来打印函数，就像这样

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

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

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

【讨论】：

这对我不起作用（即使在页面中定义了函数）：> toggle_search ReferenceError: toggle_search is not defined
啊，看看我的编辑。否则，使用搜索功能将对您有所帮助。 Chrome devtools 不是 IDE，它是一个调试器 :)
这用于查找函数的当前活动定义。
这实际上意味着该函数已在当前范围内定义。
@aroth 至少在 Chrome 45 中，这又可以工作了。我知道在发布这篇文章和现在之间的某个地方发生了变化。最后，它似乎再次起作用了。