Есть ли какой-нибудь эквивалент dbug (* очень * симпатичная печать для vars) для javascript?

Question

Мне известен файл console.log в firebug, и эта вещь называется dbug (но совсем не то, что я хочу). То, что я ищу, это то, что даст мне симпатичное вложенное представление для печати в объект, который выглядит следующим образом для javascript:

_{(источник: ospinto.com )}

Мне также известен этот вопрос , и я ищу что-то более табличное.

Answer 1

Попытка:

См. Демонстрацию: 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;

    };

})();

Answer 2

Я только что видел сегодня , может быть, это то, что вы ищете?

Answer 3

Я думаю, что вы ищете это http://www.netgrow.com.au/files/javascript_dump.cfm это javascript-эквивалент тега дампа coldfusion

Answer 4

Я не сталкивался с таким отладчиком, хотя кажется, что этот конкретный стиль будет слишком сложно написать самому. Просто базовая рекурсивная функция, передающая текущий объект и ячейку таблицы, чтобы тоже начать писать, а затем просто строить на ходу.

Что касается вышеприведенного комментария к циклической ссылке, его можно легко обойти, сохранив массив объектов, которые вы уже обработали. Перед обработкой объекта проверьте, есть ли он уже в списке. если это так, обозначьте это в поле значения вашего вывода как что-то вроде «циклической ссылки на» ... однако вы хотите обозначить объект вверх по иерархии.

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;
}