How to inspect Ember.js objects in the console?

Question

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

That's not super helpful, and it gives you no idea what attributes are actually set on the object.

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

Is there any way to dig deeper into the object's data?

Answer 1

Ember provides several methods to help debug an object from console:

Object.toString prints identity of any ember object

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

Ember.inspect converts the object into 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 of the keys defined on an object or hash

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