5

我正在将各种性能指标记录到控制台（如果存在）。最好将此内容视为表格，FireBug 的console.table()方法效果很好——但我的大多数用户都在 Chrome 中。

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

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

4

4 回答 4

5

现在您可以在 Chrome Canary 中执行此操作https://plus.google.com/+GoogleChromeDevelopers/posts/j8dMDxqbVv7

于 2013-02-22T15:41:38.730 回答
4

我有同样的问题并写了下面的代码。它不像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;
}
于 2013-02-23T07:42:11.297 回答
1

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

于 2013-11-18T06:02:42.383 回答
0

内部移动垫

// 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);
    }
}
于 2013-03-28T19:02:53.373 回答