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

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

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

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


当前回答

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

进一步阅读:

Chrome DevTools > JavaScript调试参考

其他回答

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

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

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

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

单击Sources选项卡。然后选择索引页。搜索 函数。

选择函数,然后右键单击函数并选择 "在控制台中评估选定的文本。"

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

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

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

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

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

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

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