Ember.js is a web framework that makes development and prototyping much easier and faster. It is an open-source JavaScript framework that develops projects in MVC architecture. Ember.js applications are ready-made for professional-level projects because of their structured project.
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.
- Live Debugging elements and promises: We may not change the data at the application always, so the inspector gives us the chance to change some values or elements of the application and see their results. These results are not stored in the application so we are on the safer side. We can debug the async promises used in javascript inside the inspector.
Installation: The plugin is available for the following browsers:
- Google Chrome
- Firefox
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.
ember serve
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.
-
For Home:
ember generate route home
-
For About:
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.
import EmberRouter from '@ember/routing/router';
import config from 'ember-cli-tutorial/config/environment';
export default class Router extends EmberRouter {
location = config.locationType;
rootURL = config.rootURL;
} Router.map(function () {
this.route('home', { path: '/' });
this.route('about');
}); |
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.
<div class='item'>
<h4>
{{@title}}
</h4>
<a href="{{@link}}" target="_blank">Click Here</a>
</div>
|
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.
import Route from '@ember/routing/route';
export default class HomeRoute extends Route {
async model() {
return {
items: [
{
name: 'Data Structures',
link: '
},
{
name: 'Algorithms',
link: '
},
{
name: 'Competitive Programming',
link: '
},
],
};
}
} |
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.
{{page-title "Home"}} <h1 id='title'>
GeeksforGeeks Ember Inspector
</h1>
<div class="navbar">
<LinkTo @route="home" class="nav">Home</LinkTo>
<LinkTo @route="about" class="nav">About</LinkTo>
</div>
<div id='items'>
{{#each @model.items as |item|}}
<Item @title={{item.name}} @link={{item.link}}></Item>
{{/each}}
</div>
|
body { margin: 2rem;
background-color: rgb(22, 187, 64);
} #title { text-align: center;
color: aliceblue;
} #items { margin: auto;
width: 80%;
height: 70vh;
bottom: 5rem;
background-color: white;
border-radius: 10px;
overflow-x: hidden;
overflow-y: auto;
} .item { margin: 2rem;
padding: 5px 20px;
background-color: rgb(131, 243, 164);
border-radius: 10px;
} .navbar { display: inline;
margin: 5rem;
} .navbar .nav { text-decoration: none;
font-size: 32px;
font-weight: 600;
background-color: rgb(57, 248, 57);
transition-duration: 0.5s;
border-radius: 10px;
color: black;
} .navbar .nav:hover { background-color: rgb(34, 158, 34);
} |
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.
{{page-title "About"}} <h1 id="title">GeeksforGeeks Ember js Tutorial</h1>
<div class="navbar">
<LinkTo @route="home" class="nav">Home</LinkTo>
<LinkTo @route="about" class="nav">About</LinkTo>
</div>
<p id="items">GeeksforGeeks is a programming tutorial website
with lots of wonderful content at no cost.
</p>
|
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.
-
Libraries:
-
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: