Geek asks and answers

Embed firebug console.table in chrome

I log various performance metrics on the console (if any). This content is best viewed as a table, and the Firebug method console.table()works great, but most of my users are in Chrome.

console.table()is a great solution because I get a well-formatted grid with a user interface without creating or supporting a dedicated user interface. Currently in Chrome I can register unformatted text.

Alternatively, if there is a way to render the HTML content in the console, this will work too. I can send html to the console, but it displays the contents of the DOM in the elements tab. I know that an inspector is just HTML / JS / CSS - it is technically possible. In fact, I can do this when I inspect the inspector, but this does not solve the problem for the real world.

+5
source share
4 answers

, . 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;
}
+4

It also works on Chrome 31 and Firefox 25 to date.

+1
source

panel moved inside

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

More articles:


All Articles