获取 console.log() 以显示自定义对象描述答案

【问题标题】：Get console.log() to display custom object description获取 console.log() 以显示自定义对象描述
【发布时间】：2014-04-03 09:56:43
【问题描述】：

我有一个自定义的 JS 对象来表示一个网格。对于这个例子，它看起来像这样：

function Grid(c, r)
{   
    var layout = [];
    var contentPointer = 0;

    this.getCell = function(c, r)
    {
        //Return selected cell
    }

    this.getRow = function(r)
    {
        //Return selected row
    }

    this.getCol = function(c)
    {
                //Return selected column
    }

    for(var row = 0; row < r; row++)
    {
        layout[row] = [];
        for(var col = 0; col < c; col++)
            layout[row][col] = 0;
    }
}

我在这里和那里使用var aGrid = new Grid(10, 10); 创建多个实例，然后以各种方式操作它们；添加/更新单元格的内容等。

我想做的是调用console.log(aGrid); 并能够自定义控制台显示的内容，例如，我得到一个包含我添加的所有单元格值或类似内容的字符串。

在我习惯于 Actionscript 中，我们将使用 trace(aGrid); 代替 console.log(aGrid);，但在 AS3 中，我可以覆盖对象的 toString() 方法，这将更新控制台输出中显示的内容。

我已经看到我可以在 JS 中将 toString() 方法添加到我的 Grid 对象，但控制台似乎没有使用它，除非我专门调用 console.log(aGrid.toString());。虽然这很好，但我只是想知道是否有办法解决这个问题。

控制台实际上是根据正在记录的对象的一些可覆盖方法生成它的输出，还是它做了一些疯狂的内部魔法来获取一个值？

使用alert(aGrid); 似乎使用toString() 并获取自定义值，但我宁愿剥去自己的皮肤也不愿使用alert(); 调试一个大项目:)

非常欢迎任何和所有的 cmets。谢谢。

PS - 我不知道不同的浏览器是否对待 console.log() 不同，但我使用的是 Chrome v33。

【问题讨论】：

标签： javascript

【解决方案1】：

我已经看到我可以在 JS 中向我的 Grid 对象添加一个 toString() 方法，但控制台似乎没有使用它，除非我专门调用 console.log(aGrid.toString());。虽然这很好，但我只是想知道是否有办法解决这个问题

不，没有办法解决这个问题。单独的控制台确实决定如何显示传递的参数 - Chrome 控制台允许您动态检查对象，而不是尝试以某种方式序列化它们。如果你想要一个自定义输出，你需要传递一个字符串。

【讨论】：

【解决方案2】：

console.log 接受 Object 作为参数，如果你把它放在那里，你将能够在 Chrome 控制台中检查它。

所以删除 .toString() 就可以了

console.log("aGird", aGrid );

【讨论】：

【解决方案3】：

您可以为此使用console.table()。 console.table 允许您指定要查看的属性。比如

console.table(aGrid);                            // will show all properties
console.table(aGrid, 'firstName');               // will show only firstName property
console.table(aGrid, ['firstName', 'lastName']); // will show firstName and lastName properties

【讨论】：