Las Angular DevTool es una extensión para navegadores basados en Chromium como Google Chrome, Edge o Brave util para perfilar y depurar aplicaciones desarrollados con Angular. Esta extensión soporta versiones de Angular 9 y superiores pero tienen que tener la característica Ivy habilitada.

Las Angular DevTools es una evolución de una extensión anterior desarrollada por la comunidad llamada Augury. El equipo de Angular de Google con trabajo con con los que desarrollaron Augury para generar esta nueva herramienta aunque inicialmente no tiene las mismas características que la original poco a poco se irán agregando nuevas características.

Como instalar la extension Angular DevTools

Para instalar la extension Angular DevTools en Google Chrome realiza el siguiente procedimiento:

  1. Navegar a la Chrome Web Store.
  2. Ingresar el texto “Angular DevTools” y presionar buscar.

Resultados de la busqueda de Angular Devtools

  1. Visitar la pagina de la extension.
  2. das añadir a Chrome cuando tú le das clic.
  3. te sale esta alerta y tú le das a añadir extensión y ya inmediatamente tú ya la vas a tener disponible en google Chrome.

esté aquí en este icono como del de la parte de un rompecabezas éste esta esta y podemos presionar el botón fijar para que nos aparezca en aquí de forma visible entonces cuando estamos con una aplicación Angular el modo de desarrollo este icono se va a poner en rojo.

Funciones de Angular DevTools

que te permite hacernos realizado actualmente dos funciones visualizar un árbol de la con la estructura de los componentes que conforman tu aplicación de Angular te permite buscar y ver y editar las propiedades de los componentes por ejemplo también te permite perfilar una aplicación que sería cómo medir el tiempo que se demora en renderizar una aplicación de Angular cuando hay un cambio básicamente también está esta versión.

yo aquí tengo una una aplicación como de este es un clon de youtube que estamos usando datos demo que utiliza Angular 11 entonces cuando yo le doy recargar horita ge y que acabó de instalar la aplicación se me va a poner en rojo el icono de Angular indicando que esta aplicación tiene que las Angular de octubre tienen acceso a esta aplicación porque está en modo de desarrollo entonces con esto yo presiono la tecla F12 para acceder a las herramientas de desarrollador de Google Chrome y lo que hace esta extensión es agregarlos a esta pestaña que se llama Angular aquí tiene como tal las dos las 12 este pestaña es una que es componen si la juego atrás profiler en el componen nos nos visualiza como una estructura de nuestra aplicación y nos va mostrando cada uno de los componentes aquí nosotros podemos buscar algún componente específico que queramos de google por ejemplo si yo entro a la sección de explore yo esta aplicación de clon de youtube usa utiliza un componente que se llama a ti fit este componente trae un arreglo que visualiza los que te permite visualizar los videos básicamente trae un arreglo que trae aquí este 42 vídeos si yo edito el primero me permite editar y por ejemplo yo voy a editar el título que es algo que se visualiza entonces yo aquí edito el título y le pongo no voy a poner el título entonces aquí ya inmediatamente yo veo el cambio de cómo se está visualizando esto no esto sería útil cuando tú quieres probar algo en particular o como severiano.

Entonces la otra funcionalidad que tiene es la parte del profile el que tú le presiona hace un clic como para guardar hace la interacción con tu aplicación y te va a salir como un este un gráfico de barras donde te dice cuánto tiempo se tardó el total de esta de este cambio entonces te dice que se tardó 8 milisegundos o punto 8 milisegundos y te va a decir cada componente cuarto cuánto se tardó no decía esta extensión está basada en augur y no tiene todas las funcionalidades que tenía auguri que es una extensión igual que funcionaba para Chrome.

r d de túnez para que se haga funcionar pero básicamente dependen de cómo la comunidad vaya solicitando esas nuevas funcionalidades ya esta extensión se puede usar en el nh también funciona de la misma forma igual este te aparece el icono de angula igual presiona cf 12 y ves en la en las nuevas pestañas la Angular entonces aquí mismo te demuestra cómo los componentes y las propiedades de esos componentes entonces pues esta es una nueva herramienta que va a venir a hacer una nueva herramienta en nuestras listas de utilidades para de jugar a aplicaciones de Angular y se le irán agregando más características

Ver un video

Puedes ver la version en video de este tutorial aquí: