Create an Ember Project with the Ember-CLI

Ember Templating with HTMLBars

Add user interaction to Ember.js apps using actions

Define Routes in Ember 2.0 using Ember-CLI

Creating nested routes in Ember.js

Define Models for Routes in Ember

Create Simple Components in Ember

Use Closure Actions with Ember Components

Debug Ember Applications using Ember Inspector

Ember 2 Fundamentals

In this lesson, we will learn how to install Ember Inspector and use it to see the state of our application and debug it.

The Ember Inspector can be installed from the [Chrome Web Store](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi). We will see how the inspector gives us access to information such as the routes available to us, the components used in a particular view, and data that is exposed to us etc.


https://app.egghead.io/api/v1/lessons/javascript-debug-ember-applications-using-ember-inspector/subtitles

[00:00] In order to install Ember Inspector, we can go to the Chrome Web Store and search for Ember Inspector. You'll be able to install it here. I already have it installed.

[00:12] After doing that, the next thing you'll want to do is go to Window, Extensions, and scroll down to your Ember Inspector, plug Extension, and allow access to file URLs. After doing that, we can go back to Ember Inspector.

[00:38] Let's go to heroku.com. A fun fact about this is that Heroku is an Ember.js application. If you right-click and open up the developer tools, we'll see that we have a new tab called Ember. The first thing that we're presented with is a list of the current views, or the View Tree.

[00:59] You'll notice that there's a check box here for enabling viewing components. If we hover over this, you'll see that it shows where all these components are being rendered at.

[01:10] A nice thing is that we can click on one of these components, and it'll show it up in the DOM tree or the elements tree. Going back to that tab, we can also see a list of all the roots in our application, which is nice.

[01:32] It's nice for debugging your routers to make sure if things are nested properly. It respects the nesting of your application. It's a really nice feature to have.

[01:47] We can tell what current root we're on by activating this toggle. As you can see, we're on application, protected, apps, apps/index. These are all the controllers that have been called, all the roots that have been called, and also all the templates that may be currently rendered on the page.

[02:06] Another fun aspect I really like about Ember Inspector is that if you're using Ember data, you can see what model types you have on the page. Actually, let's do hide empty model types. We can see that we have two favorites.

[02:20] Now, if we click on this, you'll notice that we have this Ember [inaudible] liker, name as Badlands, currently rendered on the page. It tells you currently what the models that are loaded into the Ember data store are. That's really helpful.

[02:39] We can also look around and see that we have other things, such as what version of Ember Inspector we're using, what version of Ember that is currently being used within the application, what version of Ember data is being used, and even what version of JQuery. We also have Ember Simple Auth, which is really cool.

[02:58] Another cool feature about Ember Inspector is that we can actually see all the promises that execute within our application. Let's reload. If you expand these tabs, it shows the time to settle, meaning how long did it take the promise to resolve, and also shows how long it took at each stage of the promise.

[03:17] Some times are known, but then on other levels we can see the router message. Oh wait, it got ignored. That didn't even really execute properly. Let's see. Oh, RESTed app there.

[03:28] It's doing an AJAX call here, and we're seeing that it resolved with these values of everything. Also, it took 263ms.

[03:43] Another thing I like about Ember Inspector is that, let's say you want to see what all these objects are. It just looks unsensible. You can click this $E button in the top right, and it'll send this object to the console. Now, we can go and we can see what everything is. That's really helpful for debugging some of those mysterious values within your Ember application.

[04:13] Lastly, what I want to show is the rendering performance. What this does is profile how long each part of the application takes to render from components to templates. It's a good way of debugging if there is a slow rendering performance within your application.

[04:32] This has been a quick walkthrough of Ember Inspector. If you go down to the data tab, one last feature I want to make sure I highlight is that you can expand these, and in some regards, you can see its own properties. Also, if it has a relation, it shows what it belongs to, or what it has many of, and also helps debug computer properties.

[04:56] Overall, Ember Inspector is a really handy must-have if you're working in any Ember applications. I highly recommend adding it.

Debug Ember Applications using Ember Inspector

Share this video with your friends

Course

Ember 2 Fundamentals