在Chrome中查找JavaScript函数定义

Question

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

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

如果没有,我猜这将来自WebKit,但找不到任何针对Developer Tool功能请求或WebKit的Bugzilla.

Answer 1

让我们说我们正在寻找名为的函数foo:

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

OSX上的cmd +选项+ F. (22认同)
现在这就是我在说什么!我不知道这个窗格是否存在 - 你怎么样？ (7认同)
然后你找不到函数声明,动态生成的函数表达式和匿名(未命名)函数.我更想要像Firefox这样的东西:点击监视面板中的功能参考 - >跳转到功能参考. (6认同)
答案似乎已经过时，如果我在开发人员控制台中单击该组合键，则什么也不会发生。 (3认同)
这只是定义名为**`foo`**的函数的一种方法.还有其他人.如果我们的功能是例如`bar ['foo']`怎么办？(就我所知,这个问题没有一个好的答案 - 它基本上是"不要写错综复杂的代码") (2认同)

Answer 2

这在2012-08-26登陆Chrome浏览器不确定确切版本,我在Chrome 24中注意到了它.

屏幕截图价值一百万字: 在此输入图像描述

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

希望大家都觉得有用!

我想你可以做`dir(myFunc)` (13认同)
是否有允许通过函数引用进行搜索的快捷方式或函数？像“>检查（document.body）”。现在我必须 d > tmp={a:myFunc}; >tmp，后跟“显示函数定义” (2认同)
奇怪的是，单击“显示函数定义”对我没有任何作用。无反应。 (2认同)

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)中.打开包含您的功能的文件(在sourcesDevTools 的面板中),然后按:

ctrl+ shift+O

或在OS X中:

⌘+ shift+O

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

Answer 5

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

Answer 6

不同浏览器的做法不同.

Answer 7

在 Chrome 控制台中：

debug(MyFunction)
MyFunction()

Answer 8

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