Is there any equivalent to dbug (a *really* pretty print for vars) for javascript?

Answer 1

I havn't run across such a debugger although it doesn't seem like this particular style would be too hard to write on your own. Just a basic recursive function passing in the current object and a table cell to start writing too, then just build as you go.

As for the circular reference comment above, this can be circumvented easily by keeping an array of objects that you have already processed. Before processing an object, check if it is already in the list. if so, denote that in the value field of your output as something like "circular reference to"...however you want to denote the object up the hierarchy.

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 2

An attempt:

See a demo: http://jsbin.com/oxeki

The 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 3

I think what you are looking for is this, http://www.netgrow.com.au/files/javascript_dump.cfm it's the javascript equivalent of coldfusion's dump tag

Answer 4

I just saw this today, maybe this is what you're looking for?