Implementieren Firebug Konsole.Tabelle in Chrom

Question

Ich protokollieren verschiedene Leistungsmetriken auf der Konsole (falls vorhanden). Dieser Inhalt wird am besten als Tabelle angezeigt, und die Methode console.table() von FireBug funktioniert hervorragend - aber die meisten meiner Nutzer sind in Chrome.

console.table() ist eine großartige Lösung, weil ich ein gut formatiertes Grid im UI-Stil erhalte, ohne eine dedizierte UI-Steuerung erstellen und warten zu müssen. Derzeit kann ich in Chrome nur unformatierten Text protokollieren.

Alternativ, wenn es einen Weg zu Render HTML-Inhalt in der Konsole gibt, würde das auch funktionieren. Ich kann HTML an die Konsole senden, aber es rendert als DOM-Inhalt in der Registerkarte Elemente. Ich weiß, der Inspektor ist nur HTML/JS/CSS - also ist es technisch möglich. Tatsächlich kann ich es tun, wenn ich den Inspektor inspiziere - aber das löst das Problem für die reale Welt nicht.

Answer 1

Jetzt können Sie es in Chrome Canary tun https://plus.google.com/+GoogleChromeDevelopers/posts/j8dMDxqbVv7

Answer 2

hatte ich das gleiche Problem und schrieb den Code unten. Es ist nicht so vollständig wie console.table, es akzeptiert nur ein Array von Datensätzen und nimmt keine Liste von Spalten. Die Ausgabe ist auch nicht so schön, aber es war genug für mich. Ein Beispiel:

$ console_table([{who:"World",message:"Hello"} 
       ,{who:"My wife",message:"Good Morning!"}]) 
|who |message  | 
|World |Hello  | 
|My wife|Good Morning!| 

Und der Code dahinter:

// 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

bewegt Auflage nach innen

// 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

Es funktioniert auch in Chrome 31 und Firefox 25, wie von heute.