在Chrome中查找JavaScript函数定义

282

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

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

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

如果没有，我猜这可能来自WebKit，但是找不到针对Developer Tool功能请求或WebKit的Bugzilla的任何内容。

javascript google-chrome-devtools

— 瑞安·杜瓦尔（Ryan DuVal）
source

3

在“脚本”选项卡中有一个搜索栏可以捕获当前文件，您可以通过打印功能来窥视功能的内容。但是我现在是好奇者，是否有一种方法可以像您希望的那样进行更广泛的搜索……

— hugomg 2012年

3

使用Google Chrome开发者工具，您可以在“源”点击->右窗口中设置“事件断点”。

就我而言，我将变量设置为未知函数。我做了myvar.toString（）并打印了：“ function Object（）{[native code]}”，这是我需要知道的全部信息。

— 响

366

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

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

对于函数定义另一种变型是function\s*foo\s*\(用于function foo(与任意数量的那些三个令牌之间的空间。

— plesiv
source

8

现在这就是我在说的！我不知道该窗格甚至存在-您会如何？

— 瑞安·杜瓦尔

22

OSX上的cmd + option + F

— Stiggler 2013年

2

这只是定义名为的函数的一种方法foo。还有其他如果我们的职能是例如bar['foo']？（据我所知，这个问题没有很好的答案---本质上是“不要编写复杂的代码”）

— Steven Lu

1

使用所选答案找不到“函数定义”。我在Google上搜索过，找不到任何帮助。（使用Chrome版本41.0.2272.118 m）

— Web_Developer

7

然后，您将找不到函数声明，动态生成的函数表达式和匿名（未命名）函数。我希望使用类似Firefox的工具：单击监视面板中的功能参考->跳转至功能参考。

— Fagner Brack，2015年

77

该版本于2012-08-26登陆Chrome浏览器。不确定确切的版本，我在Chrome 24中注意到它。

屏幕截图价值一百万字：

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

希望大家都觉得有用！

— 德米特里·帕什赫维奇
source

1

是否存在允许按功能参考进行搜索的快捷方式或功能？例如“> inspect（document.body）”。现在，我必须d> tmp = {a：myFunc}; > tmp，后接“显示函数定义”

— Dennis C

16

我认为您可以做到dir(myFunc)

— Dmitry Pashkevich 2013年

dir（myFunc）更好，但仍然需要单击两次并单击鼠标

— Dennis C

1

哦，您是说，如果您可以完全通过键盘来完成此操作？像findDefinition(myFunc)什么？AFAIK还不存在...

— Dmitry Pashkevich

如果没有包含该功能的对象，则可以在该对象周围创建一个对象，并且该对象仍然可以使用。例如，在控制台中输入：({1:somefunction})，然后右键单击打印对象内的功能。

— 保护者

47

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

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

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

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

— 乔尔
source

1

这对我不起作用（甚至没有在页面中定义的函数）：> toggle_search ReferenceError：未定义toggle_search

— Ryan DuVal

啊，看我的编辑。否则，使用搜索功能将为您提供帮助。Chrome devtools不是IDE，而是调试器:)

— 2012年

1

这适用于查找功能的当前活动定义。

— Patrick

1

它实际上暗示该功能已在当前范围内定义。

— 乔纳森·2015年

1

@aroth至少在Chrome 45中，它可以再次工作。我知道从发布到现在，事情之间发生了变化。最终，它似乎再次起作用。

— joar 2015年

32

2016更新：Chrome版本51.0.2704.103

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

ctrl+ shift+O

或在OS X中：

⌘+ shift+O

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

— 亚瑟
source

1

好吧，这似乎不是在执行任意函数调用的“定义”，而是“显示当前文件中的所有函数名称并让您使用它们”-这也很有用。

— Scott Weaver

这正是我在寻找的功能，类似于firefox！在firefox中，您只需打开开发工具，按Ctrl + f，它将在所有窗格（HTML / CSS / Javascript / etc）中搜索JS函数。做到这一点，不像其他答案中提到的正则表达式功能。

— javaBean007，2016年

@Randy，在哪个版本的chrome上？哪个操作系统？我在OS X上使用的是Chrome版本59.0.3071.115，并且工作正常。

— arthur.sw

@ arthur.sw对不起，我没有意识到您必须为此提供资源。我希望它也可以在控制台中工作。

— 兰迪

对我来说，如果我在开发控制台中按该组合键，则会打开一个Chrome菜单。

— 黑色

19

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

— RăzvanFlavius熊猫
source

17

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

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

— 迪帕克·迪克西特（Deepak Dixit）
source

我要搜索的函数是stop（），它用作onmouseover =“ this.stop（）;” 当我按照您说的去做时，它返回：stop（）{[native code]}那么现在该怎么办？

— 塔里克

functionName.toSource()也适用于最新的chrome版本。

— Sourav Ghosh 2015年

1

@Tarik查看内置文件的在线文档stop。

— 基金莫妮卡的诉讼

@QPaysTaxes谢谢，我现在知道当它返回时：stop（）{[native code]}这里的本机代码意味着它不是私有函数，它是内部函数，我应该寻找该函数的在线文档。

— 塔里克

6

在Chrome控制台中：

debug(MyFunction)
MyFunction()

— 伊戈尔·克鲁皮茨基（Igor Krupitsky）
source

1

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

— Andreas Dolk，

5

我发现定位全局函数的最快方法是：

选择来源标签。
在“ 监视”窗格中，单击“ +并键入窗口”
您的全局函数引用按字母顺序列出。
右键单击您感兴趣的功能。
在弹出菜单中选择“ 显示功能定义”。
源代码窗格切换到该函数定义。

— 克里斯·罗宾逊
source

1

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

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

选择该功能，然后右键单击该功能，然后选择“在控制台中评估所选文本”。

— 亚速
source

1

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

进一步阅读：

Chrome DevTools> JavaScript调试参考

— 凯尔·米特
source

0

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

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

— 阿卜杜拉
source