Gibt es eine Entsprechung zu dbug (ein * wirklich * hübscher Druck für vars) für Javascript?

Question

Ich kenne console.log in Firebug, und diese Sache dbug genannt (aber gar nicht was ich will). Was ich suche ist etwas, das mir einen hübschen Druck verschachtelt Blick in ein Objekt geben wird, die wie folgt für Javascript aussieht:

dbug output http://dbug.ospinto.com/img/screenshots.png

I'm also aware of this question, und bin auf der Suche nach etwas ein wenig mehr tabellarisch.

Answer 1

Ein Versuch:

eine Demo Siehe: http://jsbin.com/oxeki

Der Code:

var prettyPrint = (function(){ 

    var htmlObj = function(obj){ 
      if (Object.prototype.toString.call(obj) === '[object RegExp]') { 
       return obj.toSource ? obj.toSource() : '/' + obj.source + '/'; 
      } 
      if (typeof obj === 'object') { 
       return prettyPrint(obj); 
      } 
      if (typeof obj === 'function') { 
       return document.createTextNode('function(){...}'); 
      } 
      return obj.toString(); 
     }, 
     row = function(cells, type){ 
      type = type || 'td'; 
      var r = document.createElement('tr'); 
      for (var i = 0, l = cells.length; i < l; i++) { 
       var td = document.createElement(type); 
       td.appendChild(typeof cells[i] === 'string' ? document.createTextNode(cells[i]) : cells[i]); 
       r.appendChild(td); 
      } 
      return r; 
     }, 
     heading = function() { 
      var thead = document.createElement('thead'); 
      thead.appendChild(row(['Name','Value'], 'th')); 
      return thead; 
     }; 


    return function(obj) { 

     var tbl = document.createElement('table'), 
      tbody = document.createElement('tbody'); 

     for (var i in obj) { 
      var objCellContent = obj[i] === obj ? document.createTextNode('CIRCULAR REFERENCE') : htmlObj(obj[i]); 
      tbody.appendChild(row([document.createTextNode(i), objCellContent])); 
     } 

     tbl.appendChild(heading()); 
     tbl.appendChild(tbody); 
     return tbl; 

    }; 

})(); 

Answer 2

Ich habe nicht über solch einen Debugger laufen, obwohl es nicht scheint, dass dieser bestimmte Stil zu schwer wäre, alleine zu schreiben. Nur eine grundlegende rekursive Funktion, die das aktuelle Objekt und eine Tabellenzelle weitergibt, um mit dem Schreiben zu beginnen, erstellen Sie einfach so, wie Sie gehen.

Wie bei dem obigen Zirkelbezugskommentar kann dies leicht umgangen werden, indem ein Array von Objekten beibehalten wird, die Sie bereits verarbeitet haben. Überprüfen Sie vor der Verarbeitung eines Objekts, ob es bereits in der Liste vorhanden ist. Wenn ja, bezeichne das im Wertfeld deiner Ausgabe als etwas wie "Zirkelbezug zu" ... aber du willst das Objekt in der Hierarchie bezeichnen.

prettyprint(object, processedObjects) 
{ 
    if (processedObjects.contains(object)) 
     return 'circular refernece'; 

    processedObjects.push(object); 

    create newTable; 

    for (var in object) 
    { 
     row = newTable.addRow(); 
     row.cell1.value = var; 
     if (typeof object[var] is object) 
      row.cell2.value = prettyprint(object[var], processedObjects); 
     else if (typeof object[var] is function) 
      row.cell2.value = '[function]'; 
     else 
      row.cell2.value = object[var].toString(); 
    } 

    return newTable; 
} 

Answer 3

Ich denke, was Sie suchen dafür ist, http://www.netgrow.com.au/files/javascript_dump.cfm es ist die Javascript-Äquivalent von Coldfusion des dump tag

Answer 4

Ich sah gerade this heute, vielleicht suchen Sie das?