EmberJS Ember Inspector插件

Ember.js 是一个使开发和原型设计变得更轻松和更快速的Web框架。它是一个开源的JavaScript框架，以MVC架构开发项目。由于其结构化项目，Ember.js应用程序非常适合专业级项目。

Ember Inspector： Ember Inspector是一个浏览器插件，旨在使Web应用程序开发过程更加顺畅。它设计用于理解和调试Ember应用程序。

查看组件树： 我们可以查看应用程序当前页面的组件树，并查看是否存在任何渲染问题。
检查路由： 现代应用程序中的导航是一个必要的选择。但是为了SEO目的和其他问题，路由需要看起来漂亮，并且在刷新时呈现相同的页面。使用检查器，我们可以查看每个路由，并在出现问题时进行调试。
数据检查： 我们希望获取的数据应该被正确提取和处理，否则可能会出现错误。此外，我们还可以查看不同的传入数据模型、记录以及它们如何提供给应用程序的不同页面。
性能： 性能选项卡显示了每个页面的加载速度以及影响加载速度的不同因素。
实时调试元素和Promises： 我们不可能总是更改应用程序中的数据，因此检查器给了我们改变应用程序的某些值或元素并查看结果的机会。这些结果不会存储在应用程序中，所以我们是安全的。在检查器内，我们可以调试JavaScript中使用的异步Promises。

安装： 该插件适用于以下浏览器：

Google Chrome
Firefox

转到您的浏览器的扩展页面，搜索Ember Inspector，然后安装该插件。

EmberJS Ember Inspector插件

创建一个项目：

步骤1： 让我们创建一个包含一些元素的项目。稍后我们将使用Ember Inspector来检查这些元素。在终端/命令提示符 中输入以下命令。

ember new ember_cli_tutorial

这将创建一个新的Ember.js项目。项目的结构如下所示。

EmberJS Ember Inspector插件

步骤2： 现在使用以下命令构建并运行项目。

ember serve

项目成功构建后，请导航至http://localhost:4200 。

EmberJS Ember Inspector插件

步骤3： 创建路由，我们可以有两个不同的路由，一个是Home ，另一个是About。让我们使用Ember命令创建两个路由。

对于Home：

ember generate route home

对于About：

ember generate route about

我们需要将主页重定向为默认路由。我们需要修改router.js文件，并将路径更改为应用程序的根路径（“/”）。修改router.js文件如下。

router.js

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'); 
});

我们将在一个名为Item 的组件中显示项目。要创建一个新的组件，请使用以下命令。

ember generate component item

生成该组件之后，按照以下方式修改组件文件。

item.hbs

<div class='item'> 
  <h4> 
    {{@title}} 
  </h4> 
  <a href="{{@link}}" target="_blank">Click Here</a> 
</div>

步骤4： 创建一些数据，我们将以列表的形式显示一些数据。我们将在首页以列表的形式显示数据。所以我们将返回一个包含项目列表的模型数据。

home.js

import Route from '@ember/routing/route'; 
  
export default class HomeRoute extends Route { 
  async model() { 
    return { 
      items: [ 
        { 
          name: 'Data Structures', 
          link: ' 
https://www.geeksforgeeks.org/data-structures/', 
        }, 
        { 
          name: 'Algorithms', 
          link: ' 
https://www.geeksforgeeks.org/fundamentals-of-algorithms/', 
        }, 
        { 
          name: 'Competitive Programming', 
          link: ' 
https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/', 
        }, 
      ], 
    }; 
  } 
}

步骤5： 创建主页。我们的应用程序页面只包含默认的欢迎文本。只需删除欢迎元素，保留其他所有内容。我们将获取上述模型提供的数据，并以列表项的形式在主页上进行显示。更新home.hbs文件以显示项目列表。我们还使用此处提供的CSS进行样式设置。

home.hbs

{{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>

app.css

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); 
}

步骤6： 创建关于页面。最后，我们要创建关于页面，其中包含一些详细信息。在这里，我们将放置一些文本和标题。

about.hbs

{{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>

输出: 保存所有文件后，保存并运行项目。应用程序应该如下所示。

EmberJS Ember Inspector插件