¿Hay algún equivalente a dbug (una * realmente * bonita impresión para vars) para javascript?

Question

Conozco console.log en firebug, y esto se llama dbug (pero no del todo lo que quiero). Lo que estoy buscando es algo que me dará una vista anidada hermoso impresión en un objeto que se parece a esto para javascript:

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

I'm also aware of this question, y estoy buscando algo un poco más tabular.

Answer 1

Un intento:

ver una demostración: http://jsbin.com/oxeki

El código:

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

No me he encontrado con un depurador así, aunque no parece que este estilo en particular sea demasiado difícil de escribir solo. Solo una función recursiva básica que pasa en el objeto actual y una celda de la tabla para comenzar a escribir también, luego simplemente construye sobre la marcha.

En cuanto al comentario circular de referencia anterior, esto se puede eludir fácilmente manteniendo una matriz de objetos que ya ha procesado. Antes de procesar un objeto, verifique si ya está en la lista. si es así, denote eso en el campo de valor de su salida como algo así como "referencia circular" ... sin embargo, quiere denotar el objeto en la jerarquía.

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

Creo que lo que busca es esto, http://www.netgrow.com.au/files/javascript_dump.cfm es el equivalente Javascript de ColdFusion de etiqueta de volcado

Answer 4

Acabo de ver this hoy, tal vez esto es lo que estás buscando?