backbone-model-object-formatter.js

function getLevelIndentation(level){
    return level * 20 + "px";
}

window.devtoolsFormatters = [{
    header: function(obj, config){
        if (config && config.backboneModelFormatter){
            return ["div", {}, config.key]
        }
        if (!(obj instanceof Backbone.Model)){
             return null;
        }
        return ["div", {}, "Backbone Model with properties " + Object.keys(obj.attributes).join(", ")]
    },
    hasBody: function(){
        return true;
    },
    body: function(obj, config){
    	var level = config !== undefined ? config.level : 0;
        if (obj instanceof Backbone.Model) {
            obj = obj.attributes;
        }

        var elements = Object.keys(obj).map(function(key){
            var child;
            var childObj = obj[key];
            if (typeof childObj === "object"){
                child = ["object", {
                	object: childObj,
                	config: {
                		key: key,
                		backboneModelFormatter: true,
                		level: level + 1
                	}
                }];
            } else {
                child = key + ": " + childObj.toString();

            }
            return ["div", {style: "margin-left: " + getLevelIndentation(level)}, child];
        })

        return ["div", {}].concat(elements);
    }
}]

var model = new Backbone.Model({
	title: "Buy milk",
	author: {
		firstName: "John",
		lastName: "Smith",
		address: {
			line1: "55 Greenwood Street",
			city: "London"
		}
	}
})

console.log(model);