EmberJS - View Tree

The view tree provides current state of an application which includes currently rendered template, model, controller and components in a tree format.

You can inspect the template to see how it is rendered by Ember application −

Click on the template name in the view tree and you will see the selected DOM elements under the Elements panel −

By default, the view tree disregards the components and can be loaded into the view tree by checking the Components checkbox.

You can see the highlighted template name and its associated objects when you hover the items in the view tree.

In the above image, we have hovered on an item which is rounded with red color and related template is highlighted with the other objects in your application.

You can see the rendering duration for the given template under the Duration section in the view tree.