Uno de los procesos más importantes a la hora de construir aplicaciones es poder descubrir y corregir los errores que impiden que esta funcione de forma adecuada, para ello contamos con diferentes técnicas y herramientas.
La característica de Javascript de ejecutarse en el cliente hace que debamos hacer todo el proceso en nuestros navegadores, sin embargo en el caso de AngularJS hay cosas más complejas que simple Javascript, es por ello que debemos utilizar herramientas específicas que nos puedan dar los detalles más pertinentes a nuestra aplicación.
Es una extensión que podemos instalar en Google Chrome y que se integra directamente con las herramientas de desarrollador del navegador, la integración ocurre al generarse una pestaña en el panel que tiene el icono y el nombre de AngularJS.
Esta herramienta nos permite conocer en todo momento en que estado está nuestra aplicación hecha en AngularJS, así como saber el estado de los modelos, de la variable scope y del curso de las diferentes variables que podamos estar empleando para llevar a cabo nuestros objetivos.
Veamos las pestañas más importantes para nosotros en estos momentos:
Esta pestaña nos permite ver como las variables scope están anidadas y como se comportan en nuestra aplicación, además como su nombre lo indica también podemos ver como los modelos dentro de nuestra aplicación están funcionando junto a las variables scope, lo mejor de todo es que podemos hacer cambios y ver el resultado en tiempo real:
Esta pestaña tiene la particularidad que nos pide ser activada ya que inyecta código propio a nuestras aplicaciones, pero una vez hecho esto podremos tener una visión especial sobre las variables scope y los modelos que nos permite ver el rendimiento de lo que hemos codificado, dándonos así la oportunidad de detectar oportunidades de mejora y hacer una aplicación más rápida, lo más importante es que nos va dando datos en tiempo real mientras utilizamos nuestra aplicación, por lo que podemos ver si nuestras soluciones escalan de forma correcta con un poco de uso:
Otra cosa importante que añade Batarang a nuestro navegador es la posibilidad de ver en la consola de Javascript del navegador y al inspeccionar elementos, propiedades propias de AngularJS, con lo cual podremos investigar de forma más detallada nuestra aplicación con información relevante:
Con esto finalizamos este tutorial, como vemos Batarang es una herramienta bastante avanzada que nos permite obtener información detallada de nuestra aplicación hecha con AngularJS y que al aprender a utilizarla podremos mejorar el rendimiento de dichas aplicaciones.
La característica de Javascript de ejecutarse en el cliente hace que debamos hacer todo el proceso en nuestros navegadores, sin embargo en el caso de AngularJS hay cosas más complejas que simple Javascript, es por ello que debemos utilizar herramientas específicas que nos puedan dar los detalles más pertinentes a nuestra aplicación.
Batarang
Es una extensión que podemos instalar en Google Chrome y que se integra directamente con las herramientas de desarrollador del navegador, la integración ocurre al generarse una pestaña en el panel que tiene el icono y el nombre de AngularJS.
Esta herramienta nos permite conocer en todo momento en que estado está nuestra aplicación hecha en AngularJS, así como saber el estado de los modelos, de la variable scope y del curso de las diferentes variables que podamos estar empleando para llevar a cabo nuestros objetivos.
La herramienta
Una vez que accedemos a la pestaña o sección AngularJS en las herramientas de desarrollador de Google Chrome cuando instalamos Batarang, se nos va a desplegar la herramienta con varias pestañas más en donde cada una de ellas nos dará diferentes tipos de informaciones pertinentes a la aplicación AngularJS que se esté ejecutando en el momento en el navegador.
Veamos las pestañas más importantes para nosotros en estos momentos:
Pestaña Model
Esta pestaña nos permite ver como las variables scope están anidadas y como se comportan en nuestra aplicación, además como su nombre lo indica también podemos ver como los modelos dentro de nuestra aplicación están funcionando junto a las variables scope, lo mejor de todo es que podemos hacer cambios y ver el resultado en tiempo real:
Pestaña Performance
Esta pestaña tiene la particularidad que nos pide ser activada ya que inyecta código propio a nuestras aplicaciones, pero una vez hecho esto podremos tener una visión especial sobre las variables scope y los modelos que nos permite ver el rendimiento de lo que hemos codificado, dándonos así la oportunidad de detectar oportunidades de mejora y hacer una aplicación más rápida, lo más importante es que nos va dando datos en tiempo real mientras utilizamos nuestra aplicación, por lo que podemos ver si nuestras soluciones escalan de forma correcta con un poco de uso:
Las propiedades y acceso a la consola
Otra cosa importante que añade Batarang a nuestro navegador es la posibilidad de ver en la consola de Javascript del navegador y al inspeccionar elementos, propiedades propias de AngularJS, con lo cual podremos investigar de forma más detallada nuestra aplicación con información relevante:
Con esto finalizamos este tutorial, como vemos Batarang es una herramienta bastante avanzada que nos permite obtener información detallada de nuestra aplicación hecha con AngularJS y que al aprender a utilizarla podremos mejorar el rendimiento de dichas aplicaciones.
