【问题标题】:View a Javascript method's contents in Chrome console在 Chrome 控制台中查看 Javascript 方法的内容
【发布时间】:2018-05-21 15:35:44
【问题描述】:

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

我创建了一个JSFiddle,这可能有助于解释我在寻找什么。

【问题讨论】:

  • 不知道为什么最近的更新改变了这一点。我教编程,并在很大程度上依赖于查看控制台中的 fn 定义。现在我必须在 Sources 选项卡中执行此操作,这使得跳转回调用变得困难。

标签: javascript google-chrome debugging google-chrome-devtools console.log


【解决方案1】:
  1. 在控制台中找到感兴趣的功能
  2. 右击单词function
  3. 点击“显示函数定义”
  4. 函数现在显示在 Sources 选项卡中

或者,记录结果

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

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

【讨论】:

  • 这是完美的。谢谢!
【解决方案2】:

请记住,function 只是 Function 对象的语法糖。因为这个Object的toString()被继承了。

所以,回答你的问题:

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

【讨论】:

    【解决方案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 和“脚本”(在本例中为“fnc”)下看到它,而大多数其他实体当然是在 __proto__ 下的父级,并且原型具有构造函数。

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

    这不会与 Proto 的 FunctionLocation = unknown 或具有“无属性”的 Scope 混淆,因为我想有人可以说那是 Monadal。

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

    好的,这时您可以在附加了隐藏函数(或你有什么)等的函数上使用 Object 的 getOwnPropertyNames。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-02-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-02-17
      • 1970-01-01
      • 2013-04-16
      • 1970-01-01
      相关资源
      最近更新 更多