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

从页面中选择“Inspect Element”,将突出显示元素选项卡中的行 右键单击该行并选择“Go to function definition” 在Scripts选项卡中加载正确的脚本,并跳转到函数定义

首先,这个功能是否存在,而我只是错过了它?

如果它没有,我猜这将来自WebKit,但找不到任何开发者工具功能请求或WebKit的Bugzilla。


当前回答

2016年更新:Chrome版本51.0.2704.103

有一个转到成员的快捷方式(在设置>快捷方式>文本编辑器中列出)。打开包含你的函数的文件(在DevTools的源代码面板中),然后按:

ctrl + shift + O

或者在OS X中:

⌘+ shift + O

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

其他回答

在Chrome控制台:

debug(MyFunction)
MyFunction()

2016年更新:Chrome版本51.0.2704.103

有一个转到成员的快捷方式(在设置>快捷方式>文本编辑器中列出)。打开包含你的函数的文件(在DevTools的源代码面板中),然后按:

ctrl + shift + O

或者在OS X中:

⌘+ shift + O

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

我在查找对象方法的源时遇到了类似的问题。对象名为myTree,方法为load。我在调用方法的行上设置了断点。通过重新加载页面,执行将在该点停止。然后在DevTools控制台中,我输入对象和方法名,即myTree。加载并按Enter。该方法的定义被打印在控制台上:

此外,通过右键单击定义,你可以在源代码中找到它的定义:

不同的浏览器有不同的操作方式。

首先打开控制台窗口,右键单击页面,选择“Inspect Element”,或按F12。 在控制台中,输入… 火狐 functionName.toSource () 铬 functionName

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

进一步阅读:

Chrome DevTools > JavaScript调试参考