Series: ember-inspector

Ember Inspector 3-The View Tree

Published on Feb 21, 2015

Explore your app with the View Tree in the Ember Inspector. Match up Ember objects to the parts of the DOM that they control, explore the state of those objects, and see their relative rendering times.



Hey, and welcome back to SparkCasts. In this episode, we're going to be talking about the View Tree pane in the Ember Inspector. The View Tree helps you look at every view that's currently in the DOM, and it's arranged hierarchically, the very simple hierarchy right here.

Right here are the views that are attached to controllers. When Ember first started, this is how most of the views were done. However, components have become more and more important so they've add an option to show the views that are also associated with components, and there are a lot.

You can hover over one of these and you can see where that view is being rendered. Then, if you go here and click, it'll take you in your Chrome dev tools, to the portion of the html that is being rendered. This linkage between the View Tree and the Chrome elements DOM tree is not accidental. Lots of the behavior is the same; if we hover over something, it'll highlight. The difference being this does it at a DOM element level whereas the Ember View Tree does it based on the Ember objects that are used to define the view.

Going back to the Ember view, if we uncheck the components box, we have our basic tree and then in each of these, they have a model, a controller, and a view. If the view's not there, that's because it's automatically generated. And, since automatically generated views don't hold changeable state, unlike automatically generated controllers, they're just not shown.

Something interesting to note is that the controller for all these different levels is the same. It is the levels controller. You can see here the levels template, which has an each statement in it. Each of these virtual views is an instance of this part of the each statement. That's why they have the same controller.

The final column in the View Tree is Duration. What does the duration signify? Straight from the creator's mouth, it's the time it takes to create the view's DOM element. However, it's not actually the time it would take normally. It's the time it takes if it has a bunch of measurement things slowing it down. The real thing is faster than what it shows. The purpose of it is for comparison. Here, you can see that for some reason, this took 11 milliseconds, this took 1, this took 45. Down here, the differences probably aren't that big but if you have a page that's taking 10 seconds to load, this could be very useful to help you find out where.

Those are the columns and, for completeness sake, let's go over this header right here. We already know that the components brings out every single component and not just the views that have controllers. The All Views button doesn't really do much anymore since few people used standalone views and even fewer are using them now that they've been recommended against. Then, this button, which works better with the components clicked, it tells you what component you're hovering over in the DOM.

That is all for the View Tree. Next time we'll be talking about the Routes pane, which is also incredibly useful. I'll see you then.


Subscribe to our mailing list