How to check Ember.js objects in console?

Question

Is there a way to get what the Ember.js object really contains in the JavaScript console. If you execute console.log(this) , you will get almost the same data structure for almost any object, something like this:

This is not very useful, and it does not give you an idea of ​​what attributes are actually set on the object.

So far, the only way to debug is to try console.log(this.get('whatever')) for any conceivable name, but it's hard to guess what is available.

Is there any way to delve into object data?

Answer 1

Ember provides several methods for debugging an object from the console:

Object.toString prints the identity of any ember object

 App.Person = Em.Object.extend() person = App.Person.create() person.toString() //=> "<App.Person:ember1024>" 

Ember.inspect converts an object to a useful string description

 var object = Ember.Object.create({ firstName: 'Hansi', lastName: 'Hinterseer', age: 58 }); console.log( Ember.inspect(object) ); // {__ember1331067974108_meta: [object Object] , firstName: Hansi , lastName: Hinterseer , age: 58} 

Ember.keys returns all keys defined on an object or hash

 console.log(Ember.keys(this)); 

Answer 2

There is also an App.__container__ object, which, if you know with what name your objects are registered in the ember application, will allow you to capture any object that you need when debugging from any environment.

A few examples:

 App.__container__.lookup('store:main') # Gets the store App.__container__.lookup('controller:blog') # Gets the blog controller 

Answer 3

ember-chrome-devtools is a good way to solve this problem now ...