Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Jun 14

Depurando aplicaciones Angular con Augury

  • junio 14, 2018
  • Maribel Díaz
  • 1 Comment
  • Consejos tecnológicos, Desarrollo de software, Tecnologías

En esta entrada vamos a hacer una breve introducción a Augury, una herramienta de depuración de aplicaciones Angular que corre en el navegador.

Actualmente solo se encuentra disponible para Chrome, en forma de extensión al panel de herramientas de desarrollo (Developer Tools o DevTools). Está respaldada por parte del equipo de Angular como una herramienta oficial. Nos ayudará a la hora de explorar las relaciones entre los componentes individuales de nuestra aplicación que son visibles en la página. Por ejemplo, podemos ver el estado de un componente y modificarlo, podemos lanzar eventos manualmente, ver el código fuente del componente, etc.

La interfaz de Augury se compone, principalmente, de las siguientes secciones:

– Component Tree: es una lista de todos los componentes Angular que son visibles en la página. Si realizamos alguna acción que altera esos componentes o su estado, los cambios se resaltan actualizados en el panel de Augury. Cada uno de los componentes podrá tener información útil como: propiedades, providers, estado, inputs, dependencias, etc.

– Injector Graph: para cada componente podemos ver un diagrama de las dependencias inyectadas en él.

– Router Tree: diagrama de todas las rutas definidas en la aplicación (sólo funcionará si tenemos inyectado un Router en el componente root de la aplicación, como está explicado en la documentación de Augury).

– NgModules: una vista con lo que tenemos en nuestro “app.module.ts”.

– View Source: podemos ver el código fuente asociado al componente que hayamos seleccionado en el Component Tree. Para ello, seleccionamos la opción “View Source” y se nos abrirá la pestaña “Source” con el código fuente en cuestión.

– Búsqueda: adicionalmente se incluye una herramienta de búsqueda. Augury añade un atributo a cada componente y directiva que se muestra en el Component Tree, consistente en un identificador con un valor que indica en qué parte de la jerarquía existe el elemento y su posición entre sus elementos hermanos. Es posible también buscar por nombre.

Aún estando empaquetada como una extensión para Google Chrome, Augury realmente es un envoltorio de una aplicación Angular escrita en Typescript. Utiliza las APIs de Google Extensions y de Angular Debug. Más información técnica en https://github.com/rangle/augury

 

Index

  • 1 Instalación
  • 2 Usar Augury
  • 3 Component Tree
  • 4 Injector Graph
  • 5 Routing Tree
  • 6 NgModules

Instalación

Para instalarlo, una de las maneras es entrar en la Chrome Web Store (https://chrome.google.com/webstore/category/extensions), seleccionar “Extensiones” desde el panel lateral y buscar “Augury”.

Augury

Seleccionamos la extensión del Rangle.io:

Augury

Cuando hagamos click en “Añadir a Chrome”, nos aparecerá un popup. Seleccionamos “Añadir Extensión” para completar el proceso. Una vez que hay finalizado la instalación, un icono nuevo aparecerá al lado de la barra de direcciones del navegador:

Augury

 

Usar Augury

Para usar Augury necesitamos estar ejecutando una aplicación Angular 2 (la documentación de Augury no especifica que de soporte para Angular 5 y 6, por lo tanto, es posible que se produzcan bugs) en modo desarrollo (depuración). Si la aplicación se ejecuta en modo producción, no podremos usar Augury para depurarla.

En este post vamos a usar varias aplicaciones de ejemplo, a las que podemos acceder desde la documentación de Augury.

Una vez dentro, lo único que tenemos que hacer es abrir las DevTools (atajo: Ctrl+Shift+I).

Debería aparecer una pestaña de Augury. La seleccionamos.

 Augury

 

Component Tree

Dentro de Augury, lo primero que vemos es el árbol de componentes, una lista ordenada por jerarquía de los componentes presentes en la aplicación que son visibles en el momento de la inspección.

Augury

Si pasamos el cursor sobre los elementos, estos se resaltan en la vista de la página, de la misma forma que en la pestaña “Elements” que ya nos resulta familiar.

Augury 6

Cada uno de los componentes podrá tener información útil como: propiedades, providers, estado, input, dependencias, etc.

A medida que cambiamos el estado de los componentes, los cambios se ven reflejados en el inspector, según las interacciones con la aplicación. Por ejemplo, si introducimos algo en el campo de texto donde pone “Type a message”, el resultado lo veremos en la vista en el lugar donde pone “Jumbo Shrimp!” y en el inspector, dentro de “State” y “@Input() message”. También podríamos hacer esto a la inversa, cambiar los datos en el panel y verlos reflejados en la vista.

Augury 7

Según el componente, tendremos la opción de emitir eventos. En algunas ocasiones en las que estamos prototipando, a lo mejor no nos queremos entretener en definir un event handler personalizado para hacer pruebas. En ese caso, podemos lanzar un evento manualmente.

Augury 8

Podremos comprobarlo en la consola normal de Chrome:

Augury 9

Ahora, imaginemos que hay un componente que no está funcionando como esperamos. Si hacemos click en “View Source” veremos el código fuente asociado al componente.

Augury 10

Augury

 

Injector Graph

Si en alguna ocasión no has tenido claro qué era inyectado, qué era instanciado, qué dependía de qué, probablemente encontrarás esto útil. Podemos ver una jerarquía donde se muestra de dónde viene cada componente.

En este otro ejemplo, vemos que el componente “FormNewUserComponent” tiene una dependencia llamada “NewUserService”.

Augury 12

Si vemos su Injector Graph, comprobamos que “NewUserComponent” es inyectado por “FormNewUserComponent”.

Augury 13

 

Routing Tree

Otra herramienta visual. Muestra todas las rutas disponibles en la aplicación, si las hay (en caso de usar el Router de Angular). Si pasamos el cursor por encima de cada nodo, podemos ver más información. El color tiene un significado: rojo para las rutas normales y el azul para rutas auxiliares.

Augury 14

Incluso podemos ver cómo se cargan en tiempo real los componentes diferidos (lazy loaded):

Augury 15

 

NgModules

Los imports, exports, providers, declarations de nuestro “app.module.ts.”

Augury 16

En definitiva, Augury puede ser una herramienta muy útil a la hora de visualizar y depurar de manera concisa y resumida los componentes que forman nuestra aplicación Angular. Además, podemos usarla para hacer pruebas en tiempo real, sin necesidad de modificar nuestro código fuente en caso de que no queramos invertir tiempo en esto.

Artículos Relacionados:

  • Fissios-appFissios para pacientes de COVID-19
  • ipatia-webPresentamos IPatia, aplicación web de gestión de patentes
  • Sistema embebido: Desarrollo de software embebido C++ en MadridSistema embebido|Descubre C/C++ para el desarrollo de software embebido
  • Sistema embebido y sus características | Conceptos fundamentales - Tribalyte TechnologiesSistemas embebidos y sus características | Conceptos fundamentales
  • Principios S.O.L.I.D. - Open-ClosedPrincipios S.O.L.I.D. - "Open-Closed"
  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

Maribel es ingeniera de software. Actualmente su trabajo se centra en el desarrollo de aplicaciones híbridas full stack. Perfeccionista y amante de los detalles, siempre se esfuerza al máximo para lograr sus objetivos. Sus principales intereses son las tecnologías web y las aplicaciones móviles, así como la programación gráfica 3D.

Related Posts

1 Comment

  1. Daniele
    febrero 1, 2019 at 12:16 am · Responder

    Xvr, hoy lo descubro y comenzaré a usarlo. Un abrazo. :)

Leave a reply Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

ELIGE UNA CATEGORÍA

  • Blockchain
  • Consejos tecnológicos
  • Desarrollo de aplicaciones
  • Desarrollo de software
  • Sistema embebido
  • Tecnologías
  • Uncategorized

Una compañía dedicada al desarrollo de apps, software y soluciones embebidas para empresas.

SOCIOS

Contacto

Glorieta de Quevedo 8 6º2
28015 Madrid (ESPAÑA)
Phone: +34 910 177 514 E-Mail: contact@tribalyte.com Web: www.tribalyte.com
Sello PYME INNOVADORA 21/01/2025
PYME INNOVADORA
Válido hasta el 21 de enero de 2025
escudo de MEIC 21/01/2025

AYUDA

  • Política de privacidad
  • Política de calidad
  • Política de seguridad
  • Términos de uso

CERTIFICACIONES

⠀⠀⠀⠀⠀⠀⠀⠀⠀

SUBVENCIONES

Tribalyte Technologies S.L. ha    conseguido la ayuda C007/20-ED de Red.es para el impulso y la promoción de actividades de I+i y para el fomento de la inversión empresarial para desarrollar el proyecto iPatia. Así mismo, valoramos muy positivamente la contribución del FEDER, principal fondo de la política de cohesión europea, por lo que supone de impulso a nuestro trabajo y en consecuencia al crecimiento económico y la creación de empleo de esta región y de España en su conjunto.
Esta página web utiliza cookies para mejorar su experiencia de usuario y para recabar estadísticas anónimas de uso. Aceptar Más información