Question

我正在将各种性能指标记录到控制台（如果存在）。此内容最好以表格形式查看，FireBug的console.table()方法效果很好 - 但我的大部分用户都在Chrome中。

console.table()是一个很好的解决方案，因为我获得了格式良好的UI样式网格，而无需构建和维护专用的UI控件。目前，在Chrome中，我只能记录无格式文本。

或者，如果有一种方法可以在控制台中呈现 HTML内容，那也可以。我可以将html发送到控制台，但它会在元素选项卡中呈现DOM内容。我知道检查器只是HTML / JS / CSS - 所以它在技术上是可行的。事实上，当我检查检查员时，我可以这样做 - 但这并不能解决现实世界的问题。

Answer 1

现在，您可以在Chrome Canary https://plus.google.com/+GoogleChromeDevelopers/posts/j8dMDxqbVv7

中执行此操作

Answer 2

我遇到了同样的问题并编写了下面的代码。它不像console.table那样功能齐全，它只接受一组记录，并且不会列出列。输出也不是很好，但对我来说已经足够了。一个例子：

$ console_table([{who:"World",message:"Hello"}
                ,{who:"My wife",message:"Good Morning!"}])
|who    |message      |
|World  |Hello        |
|My wife|Good Morning!|

背后的代码：

// Will be available in the latest Chrome, then I can delete this
function console_table(xs)
{
    if (xs.length === 0)
        console.log("No data");
    else
    {
        var widths = [];
        var cells = [];
        for (var i = 0; i <= xs.length; i++)
            cells.push([]);
        for (var s in xs[0])
        {
            var len = s.length;
            cells[0].push(s);
            for (var i = 0; i < xs.length; i++)
            {
                var ss = "" + xs[i][s];
                len = Math.max(len, ss.length);
                cells[i+1].push(ss);
            }
            widths.push(len);
        }
        var s = "";
        for (var x = 0; x < cells.length; x++)
        {
            for (var y = 0; y < widths.length; y++)
                s += "|" + pad(widths[y], cells[x][y]);
            s += "|\n";
        }
        console.log(s);
    }
}

function pad(n,s)
{
    var res = s;
    for (var i = s.length; i < n; i++)
        res += " ";
    return res;
}

Answer 3

截至今天，它也适用于Chrome 31和Firefox 25。

Answer 4

移动垫内

// Will be available in the latest Chrome, then I can delete this
function console_table(xs)
{

    function pad(n,s)
    {
        var res = s;
        for (var i = s.length; i < n; i++)
            res += " ";
        return res;
    }

    if (xs.length === 0)
        console.log("No data");
    else
    {
        var widths = [];
        var cells = [];
        for (var i = 0; i <= xs.length; i++)
            cells.push([]);
        for (var s in xs[0])
        {
            var len = s.length;
            cells[0].push(s);
            for (var i = 0; i < xs.length; i++)
            {
                var ss = "" + xs[i][s];
                len = Math.max(len, ss.length);
                cells[i+1].push(ss);
            }
            widths.push(len);
        }
        var s = "";
        for (var x = 0; x < cells.length; x++)
        {
            for (var y = 0; y < widths.length; y++)
                s += "|" + pad(widths[y], cells[x][y]);
            s += "|\n";
        }
        console.log(s);
    }
}

在chrome中实现firebug的console.table

4 个答案: