How about a walk through of the lifecycle of ember/ember-data objects. Or tips/hints for debugging Ember.js and Ember-Data?

Question

I'm not looking for how to debug javascript. I'm quite familiar with the tools at hand, albeit unfamiliar with Firefox's newish debugging since they built their own "firebug".

I'm really just looking for an easy way to read the stack trace as objects/functions get passed around quite readily to be run through Ember's own calling mechanisms. It's easy to lose track of what function it is that is being called and the binding of this that it's attached to. Does anyone have any tricks or pneumonics they think of when debugging ember's stack?

Update: this is less of a problem with async debugging http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

Answer 1

First, is that you will want to use the debug version of ember, not the minified production version. This will give you better ember information in the console.

Secondly, the thing that has been greatly helpful for me, is to add in debugging within all my events in my routes, views, and controllers.

I have a property on my main App class called debugMode and then a log function.

window.App = Ember.Application.create({

    debugMode: false,

    log: function(message, location, data) {
      if (this.debugMode) {
        if (data != null) {
          if (typeof data === 'object') {
            data = Ember.inspect(data);
          }
          console.log('DEBUG: ' + this.appName + ' : ' + location + ' : ' + message);
          return console.log('DEBUG: ' + this.appName + ' : (continued) data: ' + data);
        } else {
          return console.log('DEBUG: ' + this.appName + ' : ' + location + ' : ' + message);
        }
    }
}

The log function takes in the message, location, and then optionally data pertinent.

So, two examples of logging are below:

1. log a function, and pass in data

   App.ProfileController = Ember.ObjectController.extend({
   
     setProfile: function() {
       App.log("setting current user's profile", 'App.ProfileController.setProfile', App.currentUser);
     //do other stuff with the profile
     }
   })
   

2. log the initialization of a controller/view/route

   App.EventController = Ember.ObjectController.extend({
     init: function() {
       this._super();
       App.log('initializing event controller', 'App.EventController.init');
       return this.set('isLoading', false);
     }
   })
   

You will then be left with great console information to try to diagnose where the issue is happening like this:

DEBUG: My App Name : App.ApplicationController : application controller initializing
DEBUG: My App Name : App.ApplicationRoute.setupController : setupController called
DEBUG: My App Name : (continued) data: {target: <App.Router:ember249>, namespace: App, container: [object Object], _debugContainerKey: 
DEBUG: My App Name : App.accountController.setCurrentUser : setting applications currentUser object
DEBUG: My App Name : (continued) data: {"id":3,"username":"bob","firstName":"Bob","lastName":"W","updatedAt":"2013-04-16T06:29:39.731Z"}
DEBUG: My App Name : App.EventController.init : initializing event controller
DEBUG: My App Name : App.EventRoute.setupController : setupController called
DEBUG: My App Name : (continued) data: {target: <App.Router:ember249>, namespace: App, container: [object Object], _debugContainerKey: controller:event, _childContainers: [object Object], isLoading: false} 

Lastly, use debugging with

debugger;

inside of views/routes/controllers

and

{{debugger}}

inside of your templates

and from the console or inline use

Ember.inspect(YOUR_OBJECT);

to view the ember information.