代码之家  ›  专栏  ›  技术社区  ›  cgp

对于javascript,有没有与dbug(vars的一个*真的*漂亮的打印)等价的东西?

  •  9
  • cgp  · 技术社区  · 15 年前

    我知道firebug中有console.log,这个东西叫做 dbug

    dbug output
    (来源: ospinto.com

    I'm also aware of this question ,我想找一些更具表格性的东西。

    4 回复  |  直到 5 年前
        1
  •  5
  •   James    15 年前

    尝试:

    请参见演示: http://jsbin.com/oxeki

    守则:

    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;
    
        };
    
    })();
    
        2
  •  3
  •   Dan Lew    15 年前

    我刚看到 this 今天,也许这就是你想要的?

        3
  •  2
  •   Mike Clark    15 年前

    我没有遇到过这样的调试器,尽管这种特殊的风格似乎不太难自己编写。只需要一个基本的递归函数传入当前对象和一个表单元就可以开始编写了,然后就可以边编译边编译了。

    对于上面的循环引用注释,可以通过保留已处理对象的数组轻松避免这种情况。在处理对象之前,请检查该对象是否已在列表中。如果是这样,在输出的值字段中表示为类似“循环引用”……但是您希望在层次结构上表示对象。

    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;
    }
    
        4
  •  2
  •   jalpino    15 年前

    我想你要找的是这个, http://www.netgrow.com.au/files/javascript_dump.cfm 它是与coldfusion的dump标记等效的javascript