在 Chrome 中查找 JavaScript 函数定义

IT技术 javascript google-chrome-devtools
2021-03-07 22:07:49

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

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

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

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

6个回答

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

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

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

这只是定义名为 的函数的一种方式foo还有其他人。如果我们的函数是 egbar['foo']呢?(这个问题没有好的答案,据我所知——它本质上是“不要编写复杂的代码”)
2021-05-03 22:07:49
答案似乎已过时,如果我在开发人员控制台中单击该组合键,则不会发生任何事情。
2021-05-03 22:07:49
现在这就是我要说的!我不知道那个窗格甚至存在——你会怎么想?
2021-05-04 22:07:49
我无法使用所选答案找到“函数定义”。我在谷歌上搜索过,找不到任何帮助。(使用 Chrome 版本 41.0.2272.118 m )
2021-05-06 22:07:49
然后你找不到函数声明、动态生成的函数表达式和匿名(未命名)函数。我宁愿想要像 Firefox 这样的东西:单击监视面板中的函数引用 -> 跳转到函数引用。
2021-05-15 22:07:49

在 2012-08-26 登陆 Chrome 不确定确切版本,我在 Chrome 24 中注意到它。

一张截图value一百万字:

 Chrome 开发工具 > 控制台 > 显示函数定义

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

希望大家觉得有帮助!

dir(myFunc) 好多了,但仍然需要点击两次鼠标
2021-04-25 22:07:49
是否有允许通过函数引用进行搜索的快捷方式或函数?像“>检查(document.body)”。现在我必须 d > tmp={a:myFunc}; >tmp,后跟“显示函数定义”
2021-04-26 22:07:49
哦,你的意思是如果你可以完全从键盘上完成?findDefinition(myFunc)什么?AFAIK 还不存在...
2021-05-03 22:07:49
我认为你可以做到 dir(myFunc)
2021-05-05 22:07:49
奇怪的是,单击显示函数定义对我没有任何作用。无反应。
2021-05-10 22:07:49

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

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

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

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

@aroth 至少在 Chrome 45 中,这再次起作用。我知道事情在发布时和现在之间发生了变化。最后,它似乎再次起作用。
2021-04-21 22:07:49
这对我不起作用(即使在页面中定义了函数):> toggle_search ReferenceError:toggle_search 未定义
2021-04-22 22:07:49
它实际上意味着该函数已在当前范围内定义
2021-04-27 22:07:49
这适用于查找函数的当前活动定义。
2021-05-11 22:07:49
啊,看我的编辑。否则,使用搜索功能会对您有所帮助。Chrome devtools 不是 IDE,而是调试器 :)
2021-05-12 22:07:49

2016 更新:Chrome 版本 51.0.2704.103

有一个Go to member快捷方式(在 中列出settings > shortcut > Text Editor)。打开包含您的函数的文件(在sourcesDevTools面板中)并按:

ctrl+ shift+O

或在 OS X 中:

+ shift+O

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

@Randy,在哪个版本的 chrome 上?哪个操作系统?我在 OS X 上使用 Chrome 版本 59.0.3071.115,它工作正常。
2021-04-16 22:07:49
@Black 只是为了确保: 1. 在开发工具的源面板中,将焦点(单击)放在要查找函数的源文件上。2. 是字母“O”,而不是数字“0”。
2021-04-19 22:07:49
好吧,这似乎不是“转到任意函数调用的定义”,而是“向您显示当前文件中的所有函数名称并让您转到它们”——这也很有用。
2021-04-27 22:07:49
这正是我要找的,类似于firefox的功能!在 firefox 中,您只需打开开发工具,按 Ctrl+f,它就会在所有窗格(HTML/CSS/Javascript/等)中搜索 JS 功能。这样做,与其他答案中提到的正则表达式功能不同。
2021-05-01 22:07:49
@Protectorone,是的
2021-05-14 22:07:49

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