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

Question

当我console.log Chrome中的对象时，我会看到所有属性和方法名称，但我看不到方法本身的内容。如何查看对象方法的内容？

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

Answer 1

1. 在控制台
中找到感兴趣的功能
2. 右键单击function
3. 点击＆＃34;显示功能定义＆＃34;
4. 功能现在显示在来源标签
中

或者，记录

的结果

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

第三种选择是双击单词function，在编辑框中扩展功能，但我个人不喜欢这种方法，因为它有误导性 - 你可以＆＃39 ; t实际上进行了更改，但键入的键确实更改了该框的内容，任何其他日志记录活动都会导致您失去焦点

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”。列表中会弹出原型，构造函数，绑定，调用，调用者，长度，名称，内容等所有内容。

而toString只显示函数的代码

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

我猜你可以覆盖toString（或制作另一个函数）以显示你想要的内容或代替。 在Chrome控制台的输出中，你会看到VM ##：1，并且可以点击它，就像输入toString（）

一样

现在如果你设置一个断点（在这种情况下在第1行）并调用函数fnc（）然后它停止在VM ##：1源上执行（未在源文件选项卡中列出〜网络，覆盖，文件系统，片段）。 [右键单击“显示函数定义”技巧更好，没有像这样的控制台日志引用（谢​​谢）。]

但是你可以在Scope和'script'（在本例中为'fnc'）中首先看到它，当然大多数其他实体都是__proto__下的父级，而prototype有构造函数。

在那里你还可以看到包含FunctionLocation和Scopes的双方括号，它本身在Script和全局中，似乎是'this'又称Window的本地范围。

不要错误地认为Proto的FunctionLocation =未知，也没有与'没有属性'的范围有误，因为我想可以说那是Monadal。

好的，所以你可以用两三种迂回的方式到达那里，但在我看来它并不明显或特别好。也许自定义显示隐藏的函数对象参数函数可以添加到'对象'原型但是它并不重要，我还在寻找程序化解决方案呢？

好的，那就是你可以在函数上使用Object的getOwnPropertyNames这个函数带有隐藏函数（或者你有什么）等。

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