在Chrome中找到JavaScript函数定义

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

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

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

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

196803 次浏览
小开

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

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

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

编辑:这意味着函数已经在当前作用域内定义。

小开
最佳答案

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

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

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

小开

这登陆Chrome 2012-08-26 不确定确切的版本，我注意到它在Chrome 24.

一张截图值一百万字:

Chrome Dev Tools >控制台比;显示函数定义 .

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

希望对大家有帮助!

小开

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

< img src = " https://i.imgur.com/qkIH4WZ.png " alt = " " >

小开

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

  1. 首先通过右键单击页面并选择“Inspect Element”打开控制台窗口，或者通过点击F12。

  2. 在控制台，输入…

    • < p >火狐

      functionName.toSource()

    • Chrome

      functionName
小开

2016年更新:在Chrome版本51.0.2704.103

有一个Go to member快捷方式(在settings > shortcut > Text Editor中列出)。打开包含你的函数的文件(在DevTools的sources面板中)，然后按:

__abc0 + __abc1 + __abc2

或者在OS X中:

__abc0 + __abc1 + __abc2

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

小开

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

  1. 选择来源选项卡。
  2. 在看窗格中单击+并键入窗口
  3. 全局函数引用按字母顺序列在前面。
  4. 右键单击感兴趣的函数。
  5. 在弹出菜单中选择显示函数定义。
  6. 源代码窗格切换到该函数定义。
小开

在Chrome控制台:

debug(MyFunction)
MyFunction()
小开

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

  1. 单击Sources页签。然后选择索引页。搜索 李函数。< / >

enter image description here

  1. 选择函数，然后右键单击函数并选择 "在控制台中评估选定的文本。"李< / >

enter image description here

小开

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

Chrome Debugger Function Tooltip / Datatip .

进一步的阅读:

小开

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

enter image description here

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

enter image description here

小开
你遇到VM定义的JS函数，你可以在Chrome控制台面板下面尝试这个命令。 是这样的: foo函数名是window.P.execute

>window.P.execute.toString()
<'function(d,h){function n(){var a=null;e?a=h:"function"===typeof h&&(p.start=w(),a=h.apply(f,wa(d,k,l)),p.end=w());if(b){H[d]=a;a=d;for(da[a]=!0;(z[a]||[]).length;)z[a].shift()();delete z[a]}p.done=!0}var k=g||this;"function"===typeof d&&(h=d,d=E);b&&(d=d?d.replace(ha,""):"__NONAME__",V.hasOwnProperty(d)&&k.error(q(", reregistered by ",q(" by ",d+" already registered",V[d]),k.attribution),d),V[d]=k.attribution);for(var l=[],m=0;m<a.length;m++)l[m]=\na[m].replace(ha,"");var p=B[d||"anon"+ ++xa]={depend:l,registered:w(),namespace:k.namespace};d&&ya.hasOwnProperty(d);c?n():ua(l,k.guardFatal(d,n),d);return{decorate:function(a){U[d]=k.guardFatal(d,a)}}}'

我们得到了完整的函数代码。


提交答案