在 chrome 中实现 firebug 的 console.table

Implement firebug's console.table in chrome

本文关键字:console table firebug 实现 chrome      更新时间:2023-09-26

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

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

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

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

我遇到了同样的问题,并编写了下面的代码。它不像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;
}

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

垫移到内部

// 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);
    }
}