El proceso de debugging en toda aplicación es muy importante, la característica principal de Javascript es que se ejecuta en el cliente, es por ello que este proceso se lleva a cabo directamente en el navegador, esto genera a veces un poco de contrariedad en desarrolladores más expertos, sin embargo es solo un detalle más que debemos tomar en cuenta.
En el pasado hacer debug de Javascript era terrible ya que no existían las herramientas como Firebug que tenemos en nuestro día a día, por lo que desarrollar en Javascript era una tortura, en la actualidad las diferentes consolas de los navegadores nos muestran mejor el camino que está siguiendo nuestra aplicación.
Veamos a continuación algunas cosas que debemos tener en cuenta cuando queremos hacer debug de nuestro código Javascript, recordemos que este es el lenguaje en el que está AngularJS por lo que tienen relación directa:
Como mencionamos al inicio no existían en el pasado herramientas que nos permitieran evaluar nuestro código Javascript de una forma adecuada, con los navegadores modernos tenemos casi siempre disponible una consola donde podemos ver el comportamiento del Javascript, por ejemplo en Google Chrome tenemos las herramientas de desarrolladores que podemos obtener al presionar la tecla F12.
![angular_debug_app.jpg]()
Sin embargo para ver el curso de nuestra aplicación hecha en AngularJS tenemos una herramienta aún más poderosa llamada Batarang, que al instalarla nos permite ver el estado actual de nuestra aplicación, revisar los pases de llamados entre los controladores y modelos, entre otras funcionalidades.
Adicionalmente a todo esto Firebug también es una herramienta importante, ya que nos permite obtener información de los llamados Ajax y las diferentes variables o parámetros que se pasan durante estos.
Con esto finalizamos este tutorial, hemos descubierto varias herramientas que están disponibles para nosotros para hacer desarrollo de nuestras aplicaciones en AngularJS y tener el control de como ver la información cuando ocurren los errores en la misma.
En el pasado hacer debug de Javascript era terrible ya que no existían las herramientas como Firebug que tenemos en nuestro día a día, por lo que desarrollar en Javascript era una tortura, en la actualidad las diferentes consolas de los navegadores nos muestran mejor el camino que está siguiendo nuestra aplicación.
Consejos para hacer debug de Javascript
Veamos a continuación algunas cosas que debemos tener en cuenta cuando queremos hacer debug de nuestro código Javascript, recordemos que este es el lenguaje en el que está AngularJS por lo que tienen relación directa:
- Es imperativo trabajar con las versiones no comprimidas o minificadas de los archivos JS, ya que de esta forma tendremos acceso a la línea correcta del código en el cual se presenta el error, además que contaremos con los nombres correctos de las variables donde algunas herramientas nos pueden dar información más detallada del error.
- Por motivos de conveniencia lo ideal es mantener el código JS en archivos separados del archivo HTML que los ejecuta, haciendo que nuestro código sea más manejable.
- El uso de Breakpoints y de la herramienta Pause on all Exceptions nos ayudan a detener la aplicación cuando ocurre un error, con ello lograremos aislar de forma más rápida el problema, y así buscar la solución pertinente.
Herramientas de debug
Como mencionamos al inicio no existían en el pasado herramientas que nos permitieran evaluar nuestro código Javascript de una forma adecuada, con los navegadores modernos tenemos casi siempre disponible una consola donde podemos ver el comportamiento del Javascript, por ejemplo en Google Chrome tenemos las herramientas de desarrolladores que podemos obtener al presionar la tecla F12.
Sin embargo para ver el curso de nuestra aplicación hecha en AngularJS tenemos una herramienta aún más poderosa llamada Batarang, que al instalarla nos permite ver el estado actual de nuestra aplicación, revisar los pases de llamados entre los controladores y modelos, entre otras funcionalidades.
Integración con Chrome
Esta herramienta se acopla directamente en Google Chrome a las herramientas de desarrollador y nos añade una nueva pestaña con lo cual podemos empezar a obtener la información que necesitamos, como el rendimiento de nuestra aplicación, los errores, el camino que siguen las variables dentro de nuestro proceso, etc.
Adicionalmente a todo esto Firebug también es una herramienta importante, ya que nos permite obtener información de los llamados Ajax y las diferentes variables o parámetros que se pasan durante estos.
Con esto finalizamos este tutorial, hemos descubierto varias herramientas que están disponibles para nosotros para hacer desarrollo de nuestras aplicaciones en AngularJS y tener el control de como ver la información cuando ocurren los errores en la misma.
