Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Ember debugging pains

(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.

rlivsey commented Oct 16, 2012

{{log view.user}} is useful, then instead of window.myview = this I'd probably just stick a debugger in there.

Instead of myView.get('user') + '' you can do myView.get('user').toString() which feels more explicit but doesn't save you any typing!

sly7-7 commented Oct 17, 2012

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment