Saltar al contenido

Depuración de llamadas HTTP y Async

Augury es la extensión de la herramienta de desarrollo más utilizada para depurar y perfilar aplicaciones angulares dentro de los navegadores Google Chrome y Mozilla Firefox. Augury es una empresa conjunta de Angular y el equipo de Rengle.io. Esto significa que es un esfuerzo de código abierto, que viene con varias opciones de depuración, que se muestran a continuación.

Podemos ver la documentación completa en https://augury.rangle.io/.

Depuración de llamadas HTTP y Async
Depuración de llamadas HTTP y Async

El Augurio soporta varias características diferentes:

  • Demostración de entrada/salida
  • Árbol de inyección de dependencia/flujo
  • Árbol de rutas
  • Lista de módulos

Todas estas características se visualizan completamente en la herramienta de desarrollo de Google Chrome, y cada vez que abrimos una pestaña de augurio, podemos ver y probar todas las opciones anteriores.

Por ejemplo, si abrimos la pestaña de Augurio y localizamos la pestaña del árbol de componentes como en la imagen de abajo, podemos obtener la hoja de un componente como div y otros elementos en el componente.

También podemos inspeccionar el número de módulos presentes en la aplicación usando la pestaña NgModules como en la siguiente imagen.

Como pueden ver en la captura de pantalla anterior, hay módulos listados en una secuencia. Estos incluyen:

  • AppModule
  • BrowserModule
  • AppRoutingModule
  • RouterModule

Estos son los módulos primarios que se configuran en la aplicación, pero tenga en cuenta que estos módulos pueden variar de una aplicación a otra en función de la configuración del proyecto.

Por último, una de las características más útiles de Augury es que proporciona el gráfico de inyección de dependencia en la consola de Augury.Para ello tenemos que localizar la pestaña llamada Árbol de componentes y encontrar la pestaña más a la derecha, llamada gráfico de inyección , como se muestra aquí:

Aquí, en esta pestaña del gráfico del inyector, podemos ver el símbolo que denota el flujo del gráfico. En este ejemplo, la raíz, que es la raíz de la aplicación, es seguida por AppComponent y router-outlet.

Así que estas son las características significativas de Augurio: el árbol del enrutador, los módulos que hemos configurado en nuestra aplicación y el gráfico de inyección de dependencia.