EmberJS Ember Inspector Plugin
Ember Inspector: The Ember Inspector is a browser addon or plugin that is designed to make the process of web application development even smoother. It is designed to understand and debug the Ember applications.
- Viewing Component Tree: We can see the component tree of the current page of the Application and see if there are any render issues.
- Inspection of Routes: Navigation in modern applications is a necessary choice. But for SEO purposes and other issues, the routes need to be nice looking and also render the same page on refresh. With the inspector, we can see each of the routes and can debug them if there is an issue.
- Data Inspection: The data we want to fetch should be fetched and processed correctly else we can make errors. Also, we can see the different incoming data models, records and how they are being supplied to different pages of the application.
- Performance: The Performance tab shows the loading speed of each of the pages and also different aspects affecting it.
Installation: The plugin is available for the following browsers:
- Google Chrome
Go to the Extensions page of your browser and search for Ember Inspector. Then install the plugin.
Create a project:
Step 1: Let us create a project with some elements in it. Later we are going to inspect those elements using Ember Inspector. Enter the following command in your Terminal / Command Prompt.
ember new ember_cli_tutorial
This will create a new Ember.js project. The project structure will be as follows.
Step 2:Now build and run the project using the following command.
When the project is built successfully, navigate to http://localhost:4200.
Step 3:Create Routes, we can have two different routes, one Home and another About. Let us create two routes using the Ember command.
ember generate route home
ember generate route about
We will need to redirect the home page as the default route. We need to modify the router.js file and change the path to the root of the application(“/”). Modify the router.js file as follows.
We are going to display the items inside a component called Item. To create a new component use the following command.
ember generate component item
After the component is generated, modify the component file as follows.
Step 4: Create some data, we will display some data in form of a list. We are going to display the data on the Home page in form of a list. So we are going to return model data which contains a list of items.
Step 5: Create the Home page. Our application page contains only the default Welcome text. Just delete the Welcome element and keep everything else. We will fetch the data that is supplied by the above model and then display them in form of list items on the home page. Update the home.hbs file to display the list of items. We also use the CSS provided here for styling purposes.
Step 6: Create the About page. Finally the About page which we contain some details. Here we are going to place some text and headings.
Output: After saving all the files, save and run the project. The application should look as follows.
Ember Inspector. Our project is complete, now explore the Ember Inspector.
Ember Object Inspector: The object inspector allows us to interact with different objects in our application.
The component tree can be seen here.
We can explore and hover over the different components of different routes by navigating to the desired route as follows.
Routes Inspector: We have two different routes:- Home and About. So we can explore the different routes under the Routes tab. The highlight colour also changes as we change the route.
Info Tab: The Info tab shows the information of our application such as the version of Ember.js, Ember CLI etc, App Configuration is the configuration related to the project name, root URL, version, etc.
- App Config:
Render Performance: The performance measurement can be seen under this tab. This tab displays the minute details like the navigation time and other things. Clicking the refresh on the top right corner deletes the data from the tab.
- Measure Performance:
- Refresh Button:
Please Login to comment...