How about going through the life cycle of ember / ember-data objects. Or hints / tips for debugging Ember.js and Ember-Data?

Question

I am not looking for how to debug javascript. I am very familiar with the tools, although I am not familiar with the new debugging of Firefox, since they created their own "firebug".

I'm really looking for an easy way to read the stack trace, since objects / functions are easily passed through Ember's own calling mechanisms. It is easy to lose information about what function it calls, and about the binding to it to which it is attached. Does anyone have any tricks or pneumonia that they think when debugging an ember leak?

Update: this is less an issue with asynchronous debugging http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

Answer 1

First, you want to use the debug version of ember, not the mini version. This will give you the best information about ember in the console.

Secondly, what was very useful to me was to add debugging to all my events in my routes, views and controllers.

I have a property in 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 receives the message, location, and then optional data.

So, two examples of registration:

• register function and transfer data

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

• register controller / view / route initialization

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

After that, you will get more information about the console to try to diagnose where this problem occurs:

 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} 

Finally, use debugging with

 debugger; 

inside views / routes / controllers

and

 {{debugger}} 

inside your templates

and from console or built-in use

 Ember.inspect(YOUR_OBJECT); 

to view information about ember.