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

Question

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

我创建了一个 JSFiddle 可以帮助解释我正在寻找的内容。

Answer 1

或者，记录

的结果

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

第三种选择是双击 function 一词，它会在编辑框中展开功能，但我个人不喜欢这种方法，因为它具有误导性 - 您实际上无法进行更改，但键入的键确实会更改框的内容，任何其他日志记录 activity 都会导致您失去焦点

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 源上执行（未在源文件选项卡中列出 ~ 网络、覆盖、文件系统、片段）。 [如果没有像这样的控制台日志参考，右键单击 "Show function definition" 技巧会更好（感谢）。]

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

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

不要将其与 Proto 的 FunctionLocation = unknown 或具有 'no properties' 的范围混淆，因为我想可以说那是 Monadal。

好吧，你可以通过两三个环形交叉路口到达那里，但我认为它并不明显或特别好。也许可以将自定义显示隐藏函数对象参数函数添加到 'object' 原型，但这并不重要，那时我也在寻找编程解决方案吗？

好的，那时候你就可以像这样在函数上使用 Object 的 getOwnPropertyNames 和附加的隐藏函数（或你有什么）等。

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

View a Javascript method's contents in Chrome console