(Note: This gist is meant as a conversation-starter for Ember.js contributors. If you are getting started with Ember and are looking for pointers on how to debug Ember apps, check out Tom's talk instead.)
Let me demonstrate why debugging Ember applications is currently harder than it would ideally be.
Say you have a view somewhere on a page that contains
User name: "{{view.user.name}}"
And it renders User name: ""
. How do you find out what's going wrong?
First, go to the view, and save the view object somewhere:
didInsertElement: function() {
window.myView = this;
}
Then reload, and in the Chrome developer tools console, look at the view:
> myView.get('user')
▶ Class
> // Okay, the user object exists. Does it have a `name` property?
> myView.get('user.name')
undefined
> // Guess not. Wait, do we even have the right type? Let's cast to string.
> myView.get('user') + ''
"<App.User:ember895>"
> // Seems alright. Now let's find out why we're not getting a `name` property.
etc.
Notice that debugging involves a lot of typing, and some magic incantations. It's not exactly straightforward to inspect application state.
In order to retrieve a view, you can also use Ember.View.views['viewId'], where viewId is the id of the view's DOM Element. Very usefull :)