Complemento EmberJS Ember Inspector

Ember.js es un marco web que hace que el desarrollo y la creación de prototipos sean mucho más fáciles y rápidos. Es un marco JavaScript de código abierto que desarrolla proyectos en arquitectura MVC. Las aplicaciones de Ember.js están listas para proyectos de nivel profesional debido a su proyecto estructurado.

Ember Inspector: Ember Inspector es un complemento o complemento del navegador que está diseñado para hacer que el proceso de desarrollo de aplicaciones web sea aún más fluido. Está diseñado para comprender y depurar las aplicaciones de Ember.

• Visualización del árbol de componentes: podemos ver el árbol de componentes de la página actual de la aplicación y ver si hay algún problema de renderizado.
• Inspección de Rutas: La navegación en las aplicaciones modernas es una elección necesaria. Pero para fines de SEO y otros problemas, las rutas deben tener un aspecto agradable y también mostrar la misma página al actualizar. Con el inspector, podemos ver cada una de las rutas y podemos depurarlas si hay algún problema.
• Inspección de datos: los datos que queremos obtener deben obtenerse y procesarse correctamente; de ​​lo contrario, podemos cometer errores. Además, podemos ver los diferentes modelos de datos entrantes, registros y cómo se están suministrando a las diferentes páginas de la aplicación.
• Rendimiento: La pestaña Rendimiento muestra la velocidad de carga de cada una de las páginas y también diferentes aspectos que afectan a la misma.
• Elementos y promesas de depuración en vivo: es posible que no cambiemos los datos en la aplicación siempre, por lo que el inspector nos da la oportunidad de cambiar algunos valores o elementos de la aplicación y ver sus resultados. Estos resultados no se almacenan en la aplicación, por lo que estamos en el lado más seguro. Podemos depurar las promesas asíncronas utilizadas en javascript dentro del inspector.

Instalación: El complemento está disponible para los siguientes navegadores:

• Google Chrome
• Firefox

Vaya a la página Extensiones de su navegador y busque Ember Inspector. Luego instale el complemento.

Crear un proyecto:

Paso 1: Vamos a crear un proyecto con algunos elementos en él. Luego vamos a inspeccionar esos elementos usando Ember Inspector. Ingrese el siguiente comando en su Terminal / Símbolo del sistema.

ember new ember_cli_tutorial

Esto creará un nuevo proyecto Ember.js. La estructura del proyecto será la siguiente.

Paso 2: ahora compila y ejecuta el proyecto con el siguiente comando.

ember serve

Cuando el proyecto se haya creado correctamente, vaya a http://localhost:4200.

Paso 3: Crear Rutas, podemos tener dos rutas diferentes, una Inicio y otra Acerca de. Vamos a crear dos rutas usando el comando Ember.

• Para casa:

  ember generate route home

• Por alrededor:

  ember generate route about

Tendremos que redirigir la página de inicio como la ruta predeterminada. Necesitamos modificar el archivo router.js y cambiar la ruta a la raíz de la aplicación («/»). Modifique el archivo router.js de la siguiente manera.

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

Vamos a mostrar los elementos dentro de un componente llamado Elemento . Para crear un nuevo componente, use el siguiente comando.

ember generate component item

Después de generar el componente, modifique el archivo del componente de la siguiente manera.

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

Paso 4: Cree algunos datos, mostraremos algunos datos en forma de lista. Vamos a mostrar los datos en la página de inicio en forma de lista. Así que vamos a devolver datos del modelo que contienen una lista de elementos.

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/',
        },
      ],
    };
  }
}

Paso 5: crea la página de inicio. Nuestra página de aplicación contiene solo el texto de bienvenida predeterminado. Simplemente elimine el elemento de bienvenida y conserve todo lo demás. Obtendremos los datos proporcionados por el modelo anterior y luego los mostraremos en forma de elementos de lista en la página de inicio. Actualice el archivo home.hbs para mostrar la lista de elementos. También utilizamos el CSS proporcionado aquí para fines de estilo.

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

Paso 6: Cree la página Acerca de. Finalmente, la página Acerca de contiene algunos detalles. Aquí vamos a colocar algunos textos y encabezados.

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

Salida: después de guardar todos los archivos, guarde y ejecute el proyecto. La aplicación debe verse de la siguiente manera.

Inspector de brasas. Nuestro proyecto está completo, ahora explora Ember Inspector.

Ember Object Inspector: El inspector de objetos nos permite interactuar con diferentes objetos en nuestra aplicación.

El árbol de componentes se puede ver aquí.

Podemos explorar y desplazarnos sobre los diferentes componentes de diferentes rutas navegando a la ruta deseada de la siguiente manera.

Inspector de Rutas: Tenemos dos rutas diferentes:- Inicio y Acerca de. Entonces podemos explorar las diferentes rutas en la pestaña Rutas. El color de resaltado también cambia a medida que cambiamos la ruta.

Pestaña de información: la pestaña de información muestra la información de nuestra aplicación, como la versión de Ember.js, Ember CLI, etc. La configuración de la aplicación es la configuración relacionada con el nombre del proyecto, la URL raíz, la versión, etc.

• Bibliotecas:
  
• Configuración de la aplicación:

Render Performance: la medición del rendimiento se puede ver en esta pestaña. Esta pestaña muestra los detalles de los minutos, como el tiempo de navegación y otras cosas. Al hacer clic en Actualizar en la esquina superior derecha, se eliminan los datos de la pestaña.

• Medida de rendimiento:
• Botón Actualizar: