有沒有一種方法可以覆蓋 JavaScript 對象來控制 console.log 顯示的內容？

Question

我特別考慮 Chrome，盡管 Firebug 會很有趣。 我試過 toString() 和 valueOf()，但似乎都沒有使用過。 有趣的是，如果我使用一個函數，它會顯示函數定義——但是如果我添加一個 toString() 方法，它會顯示為空！

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

只是為了未來的讀者，現在有一種方法可以完全滿足這里的要求。

有關解決方案，請閱讀此重復帖子：

調整自定義對象的 console.log 行為

Answer 3

現在，您可以使用 devtools 自定義格式化程序在 Chrome 中執行此操作。 它們似乎沒有在任何地方正式記錄，並且默認情況下未啟用 - 因此您必須在 (Dev Tools Settings) > Console > Enable Custom Formatters 中啟用它們。 但是你可以為你的對象添加一個自定義格式化程序：

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數組默認為空，但我添加了檢查，因為擴展可能已經添加了自己的自定義格式化程序。

您可以在此處找到更多信息： 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