(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.
{{log view.user}}
is useful, then instead ofwindow.myview = this
I'd probably just stick adebugger
in there.Instead of
myView.get('user') + ''
you can domyView.get('user').toString()
which feels more explicit but doesn't save you any typing!