Wdrażaj konsolę firebug'a w chrome

Question

Zapisuję różne dane o wydajności na konsoli (jeśli są obecne). Ta treść jest najlepiej widoczna jako tabela, a metoda FireBug console.table() działa świetnie - ale większość moich użytkowników jest w Chrome.

console.table() to świetne rozwiązanie, ponieważ otrzymuję dobrze sformatowaną siatkę w stylu interfejsu użytkownika, bez potrzeby budowania i utrzymywania dedykowanego sterowania interfejsem użytkownika. Obecnie w Chrome mogę logować tylko niesformatowany tekst.

Alternatywnie, jeśli istnieje sposób na renderowanie zawartości HTML w konsoli, to też by działało. Mogę wysyłać html do konsoli, ale renderuje, jak robi to zawartość DOM na karcie elementów. Wiem, że inspektor to tylko HTML/JS/CSS - więc jest to technicznie możliwe. W rzeczywistości mogę to zrobić, gdy sprawdzam inspektora - ale to nie rozwiązuje problemu dla prawdziwego świata.

Answer 1

Teraz można to zrobić w Chrome Canary https://plus.google.com/+GoogleChromeDevelopers/posts/j8dMDxqbVv7

Answer 2

miałem ten sam problem i napisał poniższy kod. Nie jest tak w pełni funkcjonalny jak konsola.table, akceptuje tylko tablicę rekordów i nie pobiera listy kolumn. Wynik również nie jest tak miły, ale to mi wystarczyło. Przykład:

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

I kod za nim:

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

przeniósł pad wewnątrz

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

Działa również w Chrome i Firefox 31 25 do dnia dzisiejszego.