有没有一种方法可以覆盖 JavaScript 对象来控制 console.log 显示的内容？

Question

我特别想到了 Chrome，尽管 Firebug 会很有趣。我尝试过 toString() 和 valueOf()，但似乎都没有使用。有趣的是，如果我使用一个函数，它将显示函数定义 - 但是如果我添加一个 toString() 方法，它将显示 null！

var a = function(){};
console.log(a); // output: function (){}
a.toString = function(){ return 'a'; };
console.log(a); // output: null
a.valueOf = function(){ return 'v'; };
console.log(a); // output: null

有什么想法吗？

Answer 1

我不知道。最好的办法是在要记录的对象上定义 toString() 方法，然后直接或间接调用它：

var o = {};
o.toString = function() {
    return "Three blind mice";
};

console.log("" + o);
console.log(o.toString());

Answer 2

为了将来的读者，现在有一种方法可以完全按照此处的要求进行操作。

有关解决方案，请阅读此重复帖子：

adjust console.log behaviour of custom object

Answer 3

您现在可以在 Chrome 中使用 devtools 自定义格式化程序执行此操作。它们似乎没有在任何地方正式记录，并且默认情况下未启用 - 因此您必须在（开发工具设置）>控制台>启用自定义格式化程序中启用它们。但是您可以为您的对象添加自定义格式化程序：

class CustomClass {
    constructor (foo, bar) { this.foo = foo; this.bar = bar; }
}

window.devtoolsFormatters = (window.devtoolsFormatters || []).concat([{
    header: (obj) => {
        if (obj instanceof CustomClass) {
            return ['div', {}, `CustomClass(${obj.foo}, ${obj.bar})`];
        } else {
            return null; // fall back to default formatter
        }
    },
    hasBody: () => true, // if the user can expand to get more info
    body: (obj) => {
        return ['div', {},
            ['span', {style: 'display: block; font-weight: bold'}, 'CustomClass'],
            ['span', {style: 'display: block; margin-left: 2em'}, `foo: ${obj.foo}`],
            ['span', {style: 'display: block; margin-left: 2em'}, `bar: ${obj.bar}`],
        ];
    }
}]);

几句警告：

• 您必须从格式化程序返回一个 JsonML ([tag-name, attrs, children...]) 列表。如果您返回无效的 JsonML 或裸字符串，它将静默失败或抛出错误。
• 格式化程序必须具有 header() 和 hasBody() 函数，如果 hasBody() 返回 true，则还必须具有 body() 函数。否则，您的格式化程序将被静默忽略或引发错误。
• 不支持很多元素类型。我只能让div 和span 工作； p、strong 和其他元素都失败了。但是您可以使用 CSS 来模拟它们。
• window.devtoolsFormatters 数组默认为 null，但我添加了检查，因为扩展可能已经添加了自己的自定义格式化程序。

您可以在这里找到更多信息：https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U/preview

Answer 4

你应该从 Firebug 得到更好的结果，你应该得到

var a = function(){};
console.log(a); // output: function 
a.toString = function(){ return 'a'; };
console.log(a); // output: function, {toString()}
a.valueOf = function(){ return 'v'; };
console.log(a); // output: function, {toString(), valueOf()}

http://code.google.com/p/fbug/issues/detail?id=3117