在Chrome中查找JavaScript函数定义

2020/10/06 20:41 · javascript ·  · 0评论

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

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

首先,此功能是否存在,我只是想念它?

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

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

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

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


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

屏幕截图价值一百万个单词:

 Chrome开发者工具>控制台>显示功能定义

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

希望对大家有帮助!

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

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

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

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

2016 Update: in Chrome Version 51.0.2704.103

There is a Go to member shortcut (listed in settings > shortcut > Text Editor). Open the file containing your function (in the sources panel of the DevTools) and press:

ctrl + shift + O

or in OS X:

+ shift + O

This enables to list and reach members of the current file.

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

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

  1. 通过右键单击页面并选择“检查元素”或单击,首先打开控制台窗口F12

  2. 在控制台中,键入...

    • 火狐浏览器

      functionName.toSource()
      
    • functionName
      

在Chrome控制台中:

debug(MyFunction)
MyFunction()

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

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

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

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

在此处输入图片说明

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

在此处输入图片说明

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

Chrome调试器功能工具提示/数据提示

进一步阅读

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

在此处输入图片说明

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

在此处输入图片说明

本文地址:http://javascript.askforanswer.com/zaichromezhongchazhaojavascripthanshudingyi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!