Create Developer Tools Window

[sderickson]

One cool project for learning the higher level structure of the site and incredibly useful for Archmages everywhere would be a window which displays many helpful stats about the site at any given time. Anywhere on the site, the developer could click a button or press a shortcut and open a Developer Tools like interface in a separate window which includes:

1. Current view and subviews. They could be clicked to highlight what element that view represents. Show the module path for each one.
2. Current instances of other classes and models and collections in existence.
3. Events, subscriptions and keyboard shortcuts currently active, and what they call.
4. Active log of events, subscriptions and keyboard shortcuts as they happen.
5. Regular updating of all these as they change.

This could be used to:

1. Edify an Archmage on what is going on with a given view. See what files are involved and how they're involved and how they communicate with one another.
2. Debug issues involving tearing down objects and views and investigating memory leaks.

[nwinter]

@sderickson I was pointed at the Backbone Debugger Chrome extension by @deepak1556, which might be a good place to start with this. What do you think? I tried it and it was able to show views, models, collection, and the router, although its performance exploded when trying to play a level, and it doesn't have any CodeCombat-specific stuff (but we could extend it).

[ghost]

@sderickson @nwinter I would be willing to try this out, I am submitting the proposal for this project in GSoC as we speak. Hopefully I will be able to work on this if you like my proposal.