Angular DevTools
Angular DevTools, una extensión de Chrome DevTools que puede utilizar para inspeccionar la estructura de sus aplicaciones y perfilar su rendimiento.
Puede encontrar más sobre Angular DevTools en el video a continuación e instalarlo desde Chrome Web Store .
Mejor experiencia de depuración angular
Realizamos una encuesta dentro de Google que confirmó las observaciones que hemos recibido de desarrolladores externos: la mayoría de la gente necesita mejores herramientas para depurar sus aplicaciones.
Con base en los resultados que recibimos de los estudios externos e internos, identificamos las siguientes áreas que necesitan mayor atención:
- Mejoras en los mensajes de error.
- Comprender la ejecución de la detección de cambios
- Comprender la jerarquía de inyectores y la instanciación de proveedores
- Visualización de la estructura de los componentes
Como parte del proyecto para mejorar la experiencia de depuración, introdujimos nuevas API en el objeto global . También trabajamos en mejorar los mensajes de error de Angular al proporcionar más información y orientación práctica sobre cómo solucionarlos. Para brindar una mejor perspectiva a los desarrolladores sobre cómo pueden crear perfiles de sus aplicaciones, proporcionamos contenido sobre la creación de perfiles con Chrome DevTools.
Características de Angular DevTools
Para abordar las preocupaciones restantes y proporcionar una vista específica de Angular basada en las características de Chrome DevTools, desarrollamos Angular DevTools en colaboración con Rangle.io . El equipo de Rangle creó la primera herramienta de depuración para Angular: Augury , que sirvió a la comunidad durante años. Trabajando juntos, desarrollamos Angular DevTools desde cero, reutilizando las lecciones aprendidas de Augury.
En su versión actual, Angular DevTools se centra en:
- Visualización de la estructura del componente
- Comprender la ejecución de la detección de cambios
De manera similar a Augury, Angular DevTools proporciona un explorador de componentes que le permite obtener una vista previa de la estructura de su aplicación:
También le brinda una descripción general de los ciclos de detección de cambios, lo que lo ayuda a encontrar cuáles son los cuellos de botella de rendimiento para que pueda brindar una experiencia de 60 fps a sus usuarios.
Angular DevTools admite aplicaciones creadas con Angular v9 y superior con Ivy habilitado.
Cadena de herramientas de desarrollo completa
En Angular, hemos trabajado arduamente para proporcionar una cadena de herramientas completa para el desarrollador web moderno. Junto con la CLI de Angular, el servicio de lenguaje, las herramientas de PWA y los componentes, Angular DevTools proporciona una importante pieza faltante que le ayudará a comprender mejor la estructura de su aplicación y el rendimiento en tiempo de ejecución.
En las futuras versiones de Angular DevTools, trabajaremos para llenar la brecha de funcionalidad con Augury teniendo en cuenta las características más impactantes según sus solicitudes. ¡Estamos encantados de compartir este trabajo contigo! Esperamos que aporte un mayor nivel de confianza y transparencia a su proceso de desarrollo.