¡Hola a todos!

En este artículo, voy a hablar contigo sobre la herramienta llamada Angular DevTools que se lanzó por primera vez con Angular 12. Esta es la herramienta que te permite depurar mejor tu aplicación Angular para ver la estructura de tu aplicación.

Puede recordarle la extensión Augury que podría usar. Pero Augury no es compatible con el renderizador Ivy. Angular DevTools lo admite y funciona desde Angular 9 y superior.

¡Empecemos!

En primer lugar, me gustaría compartir con ustedes mi inventario básico de aplicaciones Angular. También usaré esta aplicación para explicar las herramientas de desarrollo. También puede utilizar y revisar la aplicación. Solía NGRX y materiales angular esquemas .

Aquí está mi repositorio de GitHub:

Además, puede consultar la versión en vivo:

Antes de comenzar, me gustaría compartir la documentación oficial con ustedes:

En su página oficial, hay un video de explicación rápida, y necesitas descargar esta extensión:

Esta extensión en este momento tiene un fondo negro, lo que significa que no se detectan aplicaciones angulares. Tenemos que navegar a alguna aplicación Angular que se esté ejecutando en modo de desarrollo.

Naveguemos hasta esta aplicación. Aquí puedes ver la aplicación del taller, y ahora ves que el logo de Angular se volvió rojo, lo que significa que se está ejecutando el modo en profundidad de la aplicación.

Abra las herramientas de desarrollo haciendo clic en el comando. Aquí puedes ver la pestaña Angular. Esta es en realidad nuestra extensión, y si navegamos allí, podremos ver el árbol de componentes.

1. Componentes

Aquí vemos el árbol de componentes.

• Puede ver que aquí tenemos el campo de formulario inteligente "componente de botón de la barra de herramientas de mapa" y así sucesivamente.
• Puede hacer clic en él para ver sus diferentes propiedades.
• Puede navegar mediante flechas hacia abajo y hacia arriba, y puede buscar ciertos componentes.
• Puede presionar Enter y ver cómo salta a los componentes que coinciden con este patrón.
• También puede interactuar con estas propiedades. Puede cambiar los valores y ver inmediatamente los comentarios en su interfaz de usuario, por ejemplo, deshabilitar el botón y ver los cambios.
• Básicamente, puede leer cualquier valor de un componente o llamar a cualquier método de este componente.

Puede ver que es la selección de mod aquí, y puede ver el código fuente. Puede configurar puntos de interrupción y depurar este componente.

Eso es todo sobre la pestaña de este componente.

2. Perfilador

Exploremos qué hay dentro del generador de perfiles.

El [rofiler tiene que ver con el rendimiento, es decir, la depuración de detección de cambios, porque las aplicaciones de Angular se relacionan con las detecciones de cambios, y así es como podemos depurar.

• En primer lugar, haga clic en el botón para comenzar a grabar. Ahora Angular DevTools registra cada ejecución de detección de cambios. Solo tiene que interactuar con algunos elementos de su página para activar la detección de cambios.

• Puedes ver la barra vertical. Esta barra indica la ejecución del círculo de detección de cambios. Si ha interactuado lo suficiente, puede detener la grabación.

• Puedes ver que ha aparecido otra barra. Hagamos clic en él
  y veamos qué muestra. Si hace clic en cualquiera de ellos, verá el tiempo total dedicado a esta ejecución de detección de cambios.

• Sabemos que hay tres cosas que pueden desencadenar la detección de cambios en Angular. Esos son eventos como enfoque, clic y mouse. Si estos eventos tienen algún controlador, entonces una llamada HTTP puede activar la ejecución de detección de cambios.
• Si tiene muchas ejecuciones de detección de cambios y está buscando una determinada, puede usar el filtro.

Conclusión

DevTools, que será adoptado por quienes usan Angular en su vida diaria, mejorará día a día y nos será aún más útil.

Puede consultar el artículo oficial de Minko Gechev .

¡Gracias por leer!