5

さまざまなパフォーマンス メトリックをコンソールに記録しています (存在する場合)。このコンテンツは表として表示するのが最適で、FireBug のconsole.table()方法はうまく機能しますが、私のユーザーのほとんどは Chrome を使用しています。

console.table()専用の UI コントロールを構築して維持する必要なく、適切にフォーマットされた UI スタイルのグリッドを取得できるため、これは優れたソリューションです。現在、Chrome では、フォーマットされていないテキストのみをログに記録できます。

あるいは、コンソールで HTML コンテンツをレンダリングする方法があれば、それも機能します。HTML をコンソールに送信できますが、要素タブで DOM コンテンツと同じようにレンダリングされます。インスペクタが単なる HTML/JS/CSS であることは知っています。したがって、技術的には可能です。実際、インスペクターを調べれば解決できますが、現実世界の問題は解決しません。

4

4 に答える 4

5

これで、ChromeCanaryで実行できます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 に答える