Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

dbug output
(source: ospinto.com)

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

like image 624
cgp Avatar asked Feb 03 '23 11:02

cgp


2 Answers

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;

    };

})();
like image 122
James Avatar answered Feb 05 '23 23:02

James


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

like image 21
Dan Lew Avatar answered Feb 05 '23 23:02

Dan Lew