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

Question

I'm aware of console.log in firebug, and this thing called dbug (but not at all what I want). What I'm looking for is something that will give me a pretty print nested view into an object that looks like this for javascript:

_{(source: ospinto.com)}

I'm also aware of this question, and am looking for something a little more tabular.

Answer 1

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 2

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

Answer 3

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 4

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