Implementare la console firebug.table in chrome

Question

Sto registrando varie metriche di prestazioni sulla console (se presente). Questo contenuto è visualizzato al meglio come una tabella e il metodo console.table() di FireBug funziona alla grande, ma la maggior parte dei miei utenti è in Chrome.

console.table() è un'ottima soluzione, perché ottengo una griglia in stile UI ben formattata senza la necessità di creare e mantenere un controllo dell'interfaccia utente dedicato. Attualmente, in Chrome, posso accedere solo al testo non formattato.

In alternativa, se esiste un modo per il rendering di rendering nella console, anche questo funzionerebbe. Posso inviare html alla console, ma esegue il rendering come contenuto DOM nella scheda degli elementi. So che l'ispettore è solo HTML/JS/CSS, quindi è tecnicamente possibile. In effetti, posso farlo quando ispeziono l'ispettore, ma questo non risolve il problema per il mondo reale.

Answer 1

Ora è possibile farlo in Chrome Canary https://plus.google.com/+GoogleChromeDevelopers/posts/j8dMDxqbVv7

Answer 2

Ho avuto lo stesso problema e ho scritto il codice qui sotto. Non è così completo come console.table, accetta solo una serie di record e non accetta un elenco di colonne. Anche l'output non è bello, ma è stato abbastanza per me. Un esempio:

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

E il codice dietro di esso:

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

spostati rilievo all'interno

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

Funziona anche in Chrome 31 e Firefox 25 a partire da oggi.