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

Question

当我在Chrome中

console.log

一个对象时，我看到了所有属性和方法名称，但看不到方法本身的内容。如何查看对象方法的内容？

我创建了一个 JSFiddle 可能有助于解释我正在寻找的内容。

Answer 1

1. 在控制台
中找到感兴趣的功能
2. 右键单击该词

   function

3. 点击“显示函数定义”
4. 函数现在显示在Sources选项卡中

---

或者，记录

的结果

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

---

第三种选择是双击单词

function

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

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