Implementa la consola de firebug.table en cromo

Question

Estoy registrando varias métricas de rendimiento en la consola (si está presente). Este contenido se ve mejor como una tabla, y el método console.table() de FireBug funciona muy bien, pero la mayoría de mis usuarios están en Chrome.

console.table() es una excelente solución, ya que obtengo una cuadrícula de estilo de interfaz de usuario bien formateada sin la necesidad de crear y mantener un control de IU dedicado. Actualmente, en Chrome, solo puedo registrar texto sin formato.

Alternativamente, si hay una manera de renderizar contenido HTML en la consola, eso funcionaría también. Puedo enviar html a la consola, pero se muestra como el contenido DOM en la pestaña de elementos. Sé que el inspector es solo HTML/JS/CSS, por lo que es técnicamente posible. De hecho, puedo hacerlo cuando inspecciono al inspector, pero esto no resuelve el problema para el mundo real.

Answer 1

Ahora puede hacerlo en Chrome Canary https://plus.google.com/+GoogleChromeDevelopers/posts/j8dMDxqbVv7

Answer 2

que tenía el mismo problema y escribió el código de abajo. No está tan completo como console.table, solo acepta una matriz de registros y no incluye una lista de columnas. El resultado tampoco es tan bueno, pero fue suficiente para mí. Un ejemplo:

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

Y el código detrás de él:

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

trasladaron almohadilla interior

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

También funciona en Chrome 31 y Firefox 25 a partir de hoy.