Add View Info Panel

[jasonLaster]

The Marionette Inspector provides tons of metadata about view properties in the info panel.

Some properties that the inspector has which could easily be added to the debugger are:

• events (dom events)
• listeners (bb _events)
• ui (subset of view properties that are dom properties)
• class properties (view properties organized by prototype chain class properties, parent class, ..., BB.View properteis)

Info Panel

Inspector serialize function

serializeView.js

this.serializeView = function(view) {
  var data = {};
  // debug.log('serializeView', view)

  if (!_.isObject(view)) {
    return {};
  }


  data.cid = view.cid;
  data.isLoading = false; // set when a view is registered, but not serialized

  data.options = this.serializeObject(view.options);
  data.el = this.serializeElement(view.el, 'el', false);
  data.events = serializeEventsHash(view.events);
  data._events = this.serializeEvents(view._events);
  data.properties = this.serializeObjectProperties(view);
  data.ancestorInfo = this.ancestorInfo(view);
  data._requirePath = view._requirePath;
  data._className = this.serializeClassName(view);
  data.parentClass = this.isKnownType(view) ? this.knownType(view).name : '';
  data.inspect = this.inspectValue(view);

  if (view.model) {
    data.model = {
      cid: view.model.cid
    };
  }

  return data;
}

[jridgewell]

An interesting side effect of jashkenas/backbone#3455 is it should be pretty easy to extend any logic for "on events" (Backbone.Events) to any "listenTo events" as well.

[Maluen]

Great suggestions! For this and for adding (showing) new features we definitely need a general / scalable UI, I've opened an issue: #34