Índice

Depurar una aplicación AngularJS

Como con cualquier otro tipo de aplicación, la depuración resulta una fase muy importante durante el desarrollo de una aplicación AngularJS y durante la resolución de anomalías.

1. Developer Tools

Todos los navegadores proporcionan herramientas de desarrollo interesantes. Permiten, entre otros, inspeccionar la estructura HTML de la página, visualizar las llamadas a la red realizadas o bien tener acceso a herramientas de monitoring, que muestran el consumo de memoria de la aplicación o el tiempo que ha tardado el navegador en mostrar la página.

images/12EP14.png

Las capturas de pantalla anteriores presentan las herramientas de visualización del DOM de Chrome a la izquierda y el depurador JavaScript de IE 11 a la derecha.

Estas herramientas son muy buenos entornos de debug, puesto que permiten, fácil y rápidamente, diagnosticar el estado de la aplicación posicionando puntos de ruptura en el código JavaScript para realizar una ejecución del código paso a paso, visualizando el contenido de las peticiones HTTP o bien detectando qué parte del código JavaScript tarda más tiempo en ejecutarse y presenta potenciales problemas de rendimiento.

images/C12EI04.png

La captura de pantalla anterior presenta el uso del inspector del DOM de las herramientas de desarrollo de Chrome. El panel lateral izquierdo contiene el código HTML de la página. Al pasar por encima de una etiqueta HTML, se subraya esta etiqueta en el navegador, lo que permite saber simplemente ...