क्रोम

Question

में फ़ायरबग कंसोल.table लागू करें मैं कंसोल (यदि मौजूद है) में विभिन्न प्रदर्शन मीट्रिक लॉगिंग कर रहा हूं। यह सामग्री तालिका के रूप में सबसे अच्छी तरह से देखी जाती है, और फायरबग की console.table() विधि बहुत बढ़िया काम करती है - लेकिन मेरे अधिकांश उपयोगकर्ता क्रोम में हैं।

console.table() एक अच्छा समाधान है, क्योंकि मुझे एक समर्पित यूआई नियंत्रण बनाने और बनाए रखने की आवश्यकता के बिना एक अच्छी तरह से स्वरूपित यूआई स्टाइल ग्रिड मिलता है। वर्तमान में, क्रोम में, मैं केवल अनफॉर्म किए गए टेक्स्ट को लॉग कर सकता हूं।

वैकल्पिक रूप से, यदि कंसोल में HTML सामग्री प्रस्तुत करने का कोई तरीका है, तो यह भी काम करेगा। मैं कंसोल पर एचटीएमएल भेज सकता हूं, लेकिन यह तत्व टैब में डीओएम सामग्री के रूप में प्रस्तुत करता है। मुझे पता है इंस्पेक्टर सिर्फ एचटीएमएल/जेएस/सीएसएस है - इसलिए यह तकनीकी रूप से संभव है। वास्तव में, जब मैं इंस्पेक्टर का निरीक्षण करता हूं तो मैं इसे कर सकता हूं - लेकिन यह वास्तविक दुनिया के लिए समस्या का समाधान नहीं करता है।

Answer 1

अब आप Chrome कैनरी https://plus.google.com/+GoogleChromeDevelopers/posts/j8dMDxqbVv7

Answer 2

में कर सकते हैं मैं एक ही समस्या थी और नीचे दिए गए कोड लिखा था। यह कंसोल.table के रूप में पूरी तरह से फीचर्ड नहीं है, यह केवल रिकॉर्ड्स की एक सरणी स्वीकार करता है, और कॉलम की सूची नहीं लेता है। आउटपुट भी उतना अच्छा नहीं है, लेकिन यह मेरे लिए पर्याप्त था। एक उदाहरण:

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

और इसके पीछे कोड:

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

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

यह भी आज के रूप में क्रोम 31 और Firefox 25 में काम करता है अंदर पैड ले जाया गया।