Cargando

Ir a contenido


 


Herramienta Batarang de AngularJS

En este tutorial veremos cómo podemos utilizar Batarang en Google Chrome, que es una herramienta de debug que nos permite analizar específicamente código escrito en AngularJS de forma que nuestro proceso de desarrollo se vuelve más cómodo y efectivo.


Escrito por el sep 12 2014 03:31 angularjs


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.

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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 12 2014 03:31
  •   Actualizado sep 12 2014 12:33
  •   Visitas 949
  •   Nivel
    Avanzado



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse