Series: ember-inspector

Ember Inspector 2-Exploring Objects

Published on Feb 15, 2015

Use the Ember Inspector to explore the Ember Object Model, and the various attributes and connections on your app's Objects (Models, Controllers, Components, etc.)




One of the big advantages of using the Ember Inspector, is the ability to explore your objects. There's two ways to do that and I'll show you both of them during this screencast.

The first way is whenever you see a $E, you can click on it and that will then make $E in the console. It'll set it to whatever you clicked on. Then you can use that to start exploring. You can get the name, you can get various properties, you can call methods on it. This is the more flexible method, but it requires you to know a lot about your model, what it's able to do.

If you're wanting more to explore and discover, the second method is simply to click on the name and then it will show you all the attributes. Not only can you see the attributes, you can change them as well. We'll take the under construction attribute, which is now false, and turn it into true. When I hit enter, you'll see that the village will disappear. You can change and edit your page live to see what happens.

Another thing you can do in this view is explore the object hierarchy. Ember uses an object model that's very similar to Ruby or other object oriented languages and different than the JavaScript prototypes. Using this view, you can explore what that looks like. We can see that Ember Observable is the farthest up in the chain. These objects inherit from Ember.Observable, then Ember.CoreObject, Ember.Object, Ember.Evented, DS.model. Then from there, it gets a little complicated because this view is showing you Ember Data specific things that I'll explore more in the screen cast on Ember Inspector and Ember Data.

You'll see that in these you can look and see what properties are being set on the core object, on DS.model. Here we have the empty loading, dirty, and several things that Ember Data takes care of for you.

Let's go ahead and look at this hierarchy on a controller. Here we have the properties for the controller and then going down we have properties that are common to an ArrayController, which we have over ridden. Then properties that are common to this subclass of the controller, and so on. We can go back up the chain and see where it diverges from the Ember Data. Here we can see that has Ember Observable, Core Object, and Object, just like Ember Data. Then it starts diverging. You can see how different objects have similarities to each other, how close they are in the hierarchy.

Also included in this hierarchy are mixins. You'll be able to see and explore which mixins have been included in this object.

The exploration in Ember Inspector isn't good for just going up and down the object hierarchy. You can also go to other objects that are connected to the one you're currently on. For example, this controller has an arranged content property. Let's see what's in there. This has several different territories. If we click this one, we're back at where we got by clicking here.

We can start to see the relationships between various objects. If we go here, we can keep clicking through and keep discovering how things are related. If you want to go back, just hit this button here. If you want to close this side panel, just hit this button.

That's how we explore objects in the Ember Inspector. Next time we'll be taking a closer look at the view tree and what we can learn from that. See you then.


Subscribe to our mailing list