Triển khai bảng điều khiển của firebug.trong chrome

Question

Tôi đang ghi nhật ký các chỉ số hiệu suất khác nhau vào bảng điều khiển (nếu có). Nội dung này được xem tốt nhất dưới dạng bảng và phương thức console.table() của FireBug hoạt động tốt - nhưng hầu hết người dùng của tôi đều ở trong Chrome.

console.table() là một giải pháp tuyệt vời, bởi vì tôi nhận được một giao diện người dùng được định dạng đúng lưới mà không cần phải xây dựng và duy trì một điều khiển giao diện người dùng chuyên dụng. Hiện tại, trong Chrome, tôi chỉ có thể đăng nhập văn bản chưa được định dạng.

Hoặc, nếu có cách nào đó để hiển thị Nội dung HTML trong bảng điều khiển, điều đó cũng sẽ hoạt động. Tôi có thể gửi html tới giao diện điều khiển, nhưng nó hiển thị dưới dạng nội dung DOM trong tab yếu tố. Tôi biết thanh tra chỉ là HTML/JS/CSS - vì vậy về mặt kỹ thuật có thể. Trong thực tế, tôi có thể làm điều đó khi tôi kiểm tra thanh tra - nhưng điều này không giải quyết được vấn đề cho thế giới thực.

Answer 1

Bây giờ bạn có thể làm điều đó trong Chrome Canary https://plus.google.com/+GoogleChromeDevelopers/posts/j8dMDxqbVv7

Answer 2

tôi đã cùng một vấn đề và viết mã dưới đây. Nó không phải là đầy đủ tính năng như console.table, nó chỉ chấp nhận một mảng các bản ghi, và không có một danh sách các cột. Đầu ra cũng không đẹp, nhưng nó đủ cho tôi. Một ví dụ:

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

Và mã đằng sau nó:

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

chuyển pad bên

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

Nó cũng hoạt động trong Chrome 31 và Firefox 25 đến ngày hôm nay.