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

你应该从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

Answer 4

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

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（[标签名，属性，子项...]）列表。如果返回无效的JsonML或裸露的字符串，它将以静默方式失败或引发错误。
格式化程序必须具有header（）和hasBody（）函数，并且如果hasBody（）返回true，则还必须具有body（）函数。否则，格式化程序将被静默忽略或引发错误。
不支持许多元素类型。我只能让div和span工作； p，strong和其他元素都失败了。但是您可以使用CSS来模拟它们。
window.devtoolsFormatters数组默认情况下为空，但是我添加了检查，因为扩展名可能已经添加了自己的自定义格式化程序。

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

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

4 个答案: