在 Chrome 控制台中查看 JavaScript 方法的内容

Question

警告：这个问题是关于 2016 年之前版本的 Google Chrome 的。从版本 126 开始，Chromium 的行为有了很大改进。下面的屏幕截图并不代表当前的行为（并且解决方案已经变得显而易见）。

---

当我在 Chrome 的控制台中打印一个对象时（例如使用

log()

），我会看到它的所有属性，包括方法，但我看不到每个方法的定义（内容）。如何查看对象方法的定义（代码）？

我创建了一个小提琴，它可能有助于解释我正在寻找的内容。这是该小提琴的屏幕截图：

Answer 1

推荐

1. 在控制台
中找到感兴趣的功能
2. 将光标放在

   f (e)

   上，然后使用指点设备的辅助按钮单击（又名 右键单击）
3. 点击“显示函数定义”

函数定义现在显示在Sources选项卡中。

替代方案（toString）

或者，记录

的结果

Function.prototype.toString.call(someObj.methodOne)
/*
function (e) {
        return 'e is ' + e;
    }
*/

最后一种方法：双击

第三种选择是双击

f (e)

，这会在编辑框中展开该功能。我个人不喜欢这种方法，因为它具有误导性 - 您实际上无法进行更改，但键入确实会更改框的内容，并且任何其他日志记录活动都会导致您失去焦点。

Answer 2

请记住，

function

只是

Function

对象的语法糖。因此

Object

的

toString()

是遗传的。

所以，回答你的问题：

console.log(someObj.methodOne.toString())

.

Answer 3

都很有趣，但在这种情况下，我将一个带标签的函数分配给一个函数

let fnc = function () { console.log("called");}
fnc.intrn = function (val) {console.log("called : ", val); }

你可以在它工作并且存在时调用它

>fnc.intrn("yup")
called :  yup

但是如果您在控制台中输入 fnc，您只会看到。

>fnc
ƒ () { console.log("called");}

当然如果你输入“func”。弹出一个列表，其中包含它拥有的所有内容，例如原型、构造函数、绑定、调用、调用者、长度、名称、intrn 等。

而 toString 只是显示函数的代码

>fnc.toString()
"function () { console.log("called");}"

我想你可以重写 toString （或创建另一个函数）来显示你想要的内容或代替。 在 Chrome 控制台输出的最右侧，您可以看到 VM##:1 并且可以单击它，可惜它与键入 toString() 相同

现在，如果您放置一个断点（在本例中为第 1 行）并调用函数 fnc()，那么它将停止在 VM##:1 源上执行（未在源文件选项卡 ~ 网络、覆盖、文件系统、片段中列出） 。 [右键单击“显示函数定义”技巧在没有像这样的控制台日志参考的情况下会更好（谢谢）。]

但是您可以首先在 Scope 和“script”（在本例中为“fnc”）下看到它，当然大多数其他实体的父级都在 __proto__ 下，并且原型具有构造函数。

在那里您还可以看到包含 FunctionLocation 和 Scopes 的双方括号，它本身位于脚本中，而全局似乎是“this”又名窗口的本地范围。

不要将其与 Proto 的 FunctionLocation =known 或具有“无属性”的 Scope 混淆，因为我想人们可以说那是 Monadal。

好吧，你可以通过两三个迂回的方式到达那里，但在我看来，这并不明显或特别好。也许可以将自定义显示隐藏函数对象参数函数添加到“对象”原型中，但这并不重要，此时我也在寻找编程解决方案？

好的，那么你就可以在附加了隐藏函数（或你有什么）等的函数上使用对象的 getOwnPropertyNames 了。

>Object.getOwnPropertyNames(fnc)
(6) ["length", "name", "arguments", "caller", "prototype", "intrn"]

Answer 4

自从你问这个问题以来，Chromium 已经有了很大的改进，但以防万一有人仍然想知道，有很多方法（我列出的方法归功于 Paul S.）。

偷懒的方法：悬停

只需将光标放在

f (e)

上，然后就会出现工具提示。

不那么懒的方法：

[[FunctionLocation]]

1. 扩大财产
2. 单击

   [[FunctionLocation]]

   伪属性的值（蓝色链接）（Chromium 现在从版本 126 开始以灰色添加）：
   

显示函数定义

1. 在Console中找到感兴趣的功能。
2. 将光标放在

   f (e)

   上，然后使用指点设备的辅助按钮单击（也称为 右键单击）。
3. 选择“显示函数定义”。

函数定义现在显示在Sources选项卡中。

双击

第三种选择是双击

f (e)

，这会在编辑框中展开该功能。

声明

或者，只需执行带有属性路径的语句。在这种情况下：

someObj.methodOne