在 Chrome 中查找 JavaScript 函数定义

2022-08-29 23:54:03

Chrome的Developer Tools摇滚，但他们似乎没有的一件事（我能找到）是找到JavaScript函数定义的方法。这对我来说非常方便，因为我正在一个包含许多外部JS文件的网站上工作。当然，grep可以解决这个问题，但在浏览器中会好得多。我的意思是，浏览器必须知道这一点，那么为什么不公开它呢？我所期望的是这样的：

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

首先，此功能是否存在，而我只是错过了它？

如果没有，我猜这将来自WebKit，但找不到任何关于Developer Tool功能请求或WebKit的Bugzilla的东西。

答案 1

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

（打开 Chrome 开发工具），
Windows：+ + ，或 macOS：+ + 。这将打开一个窗口，用于搜索所有脚本。ctrlshiftFcmdoptnF
选中“正则表达式”复选框，
搜索 foo\s*=\s* 函数（在这三个标记之间搜索任意数量的空格），foo = function
按返回的结果。

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

答案 2

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

一张截图胜过一百万字：

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

希望对您有所帮助！