Advanced usage of Ember Inspector

Accessing store object, triggering actions from the console and other tricks

Ember Inspector is a browser extension available for Chrome and Firefox created by Teddy Zeeny. I think it is not controversial to say that it is an essential tool for every Ember developer. It provides information about routes, model data and provides access to other various objects. But not only it allows you access the data, it also allows you to play with it. And that’s mostly what this short article is about. Most of the basic usage is already described in the Ember Guides.

UPDATE: Impulse for writing this article was that I could not find much information on how to interact with the Ember app in the console. I decided to try things out on my own and share what I found out. But there are definitely other ways, like using ember-devtools or writing a reusable custom script that uses App.__container__.lookup() function to get the objects you need rightaway. Check the responses below the article for more information.

The DS.Store object

Fastest way to access the store object is by accessing any route or controller object. We can list the objects within container, click any controller and then click on the >$E symbol in the top right corner to send the object in the console:

After we have the object sent to the console, we can right click it and store it as a global variable:

Now we get a global temp object we can use to access the store and perform any operations we want. Create and save new models, load custom data or perform various queries:

Triggering actions

Triggering actions can be done at every level: component, controller and route. Component objects can be sent to console by accessing them in the Application Tree (make sure that the components check-box is checked).

We can save them as global variables and then call the send function to trigger any action we need:

Altering the session object

If you are using Ember Simple Auth you can find the session object under the Container. It can be used to toggle isAuthenticated property and we can also do a “fake login” as a custom user. Send a user model and session object into console, set them as global variables and then you can do:

Now you can see how the app behaves when you are logged as certain user.

Miscellaneous

These are some other commands that might be useful to execute in the console:

Summary

Ember Inspector allows us to send various objects to the console which we can save as global variables and then use for various purposes to debug the app on the go, check different behaviors and test the security of the app — if you can do this, someone else could.