Augury: La extensión que todo desarrollador Angular quiere

¿Qué es Augury?

Es una extensión para Chrome y Firefox capaz de debuggear el estado de los componentes de nuestra aplicación desde el propio navegador. O lo que es lo mismo, olvidarnos de tener que usar ‘console.log()‘ para la mayoría de los casos que necesitemos saber el valor de una variable.

Está desarrollada por Rangle.io junto con el equipo de Angular, siendo actualizada cada poco tiempo para que mantenga la compatibilidad con todas las versiones y sea lo más estable posible.

Instalación

Para instalar la extensión en Chrome deberemos hacerlo desde Chrome Web Store, o directamente desde éste enlace.

En el caso de Firefox se puede instalar desde Firefox Browser Add-Ons o siguiendo el enlace directo.

Una vez instalada la extensión podremos verla arriba a la derecha del navegador. Por defecto estará de color gris, pero cuando entremos en una web que esté desarrollada con Angular automáticamente se pondrá de color amarillo y podremos debuggear (si está compilada para producción saldrá un mensaje avisando de ello y nos será imposible debuggear, aunque se active la extensión).

Input / Outup demo

El equipo de Augury nos proporciona una página para que podamos probar la entrada y salida de unos componentes básicos de una forma sencilla con la extensión.

Una vez en ella, abrimos las herramientas de desarrollador y nos dirigimos a la pestaña ‘Augury’. (Atajo de teclado – Windows: Ctrl + Shift + i / Mac: Cmd + Opt + i).

Nos dirigimos al input de Message Entry, introducimos un nuevo mensaje y pulsamos Send, al instante veremos como el texto de Giant Message Board se actualiza.

En la pestaña de Augury en las herramientas de desarrollador hacemos click en MessageBoardComponent. La propiedad message contiene el texto que hemos escrito, y si lo cambiamos directamente desde ahí comprobaremos como el texto de Giant Message Board vuelve a cambiar. Lo que ha sucedido aquí es que hemos cambiado el valor de la propiedad del componente directamente desde la consola, y como conseciencia el cambio se ha visto reflejado al momento.

Otra característica muy interesante es que además de tener acceso a las propiedades @Input() de los componentes (como en el ejemplo anterior), también tenemos acceso a las propiedades @Output(). Esto, en la práctica, significa que podemos ejecutar dichos eventos de salida (EventEmitters) desde el terminal.

A continuación, hacemos click en MessageEntryComponent y, efectivamente, vemos que nos aparece la propiedad messageEvent y un botón para emitir a su costado derecho. Emitimos un par de valores diferentes y observamos como se actualiza el mensaje de GiantMessageBoard.

En la parte derecha de la página hay dos componentes (CounterComponent y ToggleComponent) diferentes pero con propiedades similares para poder interactuar con ellos.

Primero aumentamos el contador de Counter mediante el botón con un + y después emitimos un número desde su propiedad countEvent. Por último, hacemos click en el botón de Toggler para ver como cambia de color el pequeño semáforo a su izquierda. Las propiedades de label y state cambian al momento de pulsar sobre el botón.

Aquí no acaba todo, además de tener acceso al estado de los componentes, podemos conocer la inyección de dependencias (Dependency Injection), las rutas de la aplicación (Routes); y ver los módulos y sus relaciones (NgModules). Para ampliar toda esta información podéis consultar la documentación oficial.