chromeでfirebugのconsole.tableを実装する

Question

コンソール（存在する場合）にさまざまなパフォーマンスメトリックを記録しています。このコンテンツは表として最もよく見られ、FireBugのconsole.table()メソッドはうまくいきますが、ほとんどのユーザーはChromeにあります。

console.table()は、専用のUIコントロールを構築して管理する必要なく、整形されたUIスタイルのグリッドを取得できるため、優れたソリューションです。現在、Chromeでは、書式なしのテキストのみを記録できます。

HTMLコンテンツをコンソールにレンダリングする方法がある場合は、それも機能します。私はコンソールにhtmlを送ることができますが、DOMコンテンツが要素タブに表示されるのでレンダリングします。私はインスペクタが単なるHTML/JS/CSSであることを知っているので、技術的に可能です。実際、私は検査官を検査するときにそれをすることができます - しかし、これは現実の世界の問題を解決しません。

Answer 1

今、あなたはクロームカナリア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

は、それはまた、今日のようクローム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); 
    } 
} 

Answer 4

内でパッドを動かしました。