Últimamente estoy laburando mucho con JavaScript, estoy realizando un trabajo de customización de un container OpenSocial (Shindig para ser más específico). El tema es que necesito ir traceando la ejecución, debbugeando, viendo el contenidos de variables, etc; por ello empezé a sacarle mucho el jugo a Firebug y a Chrome.

Hoy les voy a contar algunas cosas de Firebug, pero los ejemplos pueden replicarse fácilmente en Chrome.

Para trabajar con los JS en Firebug tenemos dos solapas super utiles, Console y Script. Console permite ir viendo los mensajes de error y los generados mediante el objeto console (ahora lo vemos a este último). Ademas te tener una consola interactiva donde podemos crear pequeños scripts y para probarlo dentro del scope de nuestro sitio.

La otra solapa permite ir haciendo debug del código, poner breakpoints, hacer step by step etc. Lo mas cheto de Firebug es la consola, esta puede presentarte información de los objetos y de las interacciones via XmlHttpRequest que esta generando tu código Javascript sin dar muchas vueltas.

Por ejemplo, desde nuestro código JS si queremos generar una salida por consola podemos utilizar el objeto global console y utilizar alguno de los siguientes métodos.

* console.log para mostrar por consola lo que quieras analizar.

* console.info, console.warn and console.error Para mostrar mensajes segun diferentes niveles de error.

* console.time para medir cuanto dura una aplicación.

El más común de todos ellos es console.log (viene a ser un reemplazo del alert), su modo de uso es muy sencillo.

console.log(obj1 [,obj2, obj3, obj4])

O puede ser utilizado como una salida formateada (printf)

console.log("%s is %i years old.", "Bob", 42)

Estos son los códigos de formato

%s = string

%i = integer

%o = object hyperlink

Podemos pasarle una lista de todas los objetos que deseamos mostrar. Pero hay muchas otras utilidades más alla de esta, alguna de ellas las dejo en este listado.

Salida

console.debug(object[,object]) Muestra un mensaje similar al anterior pero incluyendo un hyperlink hacia la línea desde donde ha sido llamado.

consolo.info(object[, object]) Similar al anterior, con estilo “info”

console.warn(object[,object]) Muestra un mensaje en modo “warning”

console.error(object[, object]) Muestro un mensaje en modo “error”

console.dir(object) Muestra una lista interactiva de todas las propiedades de un objeto, idéntico que en el tab DOM.

console.dirxml(node) Muestra el arbol XML del elemento HTML o XML. Similar al tab HTML.

Agrupar la salida

console.group(object[,object,…]) Permite anidar mensajes dentro de la consola. Usaremos console.groupEnd() para cerrar el grupo.

console.groupEnd() Cierra el bloque anidado.

Para testeos sencillos

console.assert(expresion[,object]) Comprueba que una expresión sea cierta, sinó muestro en la consola la excepción recibida.

Medir tiempos de Ejecución

console.time(name) Crea un temporizador con el nombre que le indiquemos.

console.timeEnd(name) Termina el temporizador con el nombre indicado.

Analizar el StackTrace en un punto determinado

console.trace() Muestra una traza interactiva desde donde fue llamada.

debugger : Esta instrucción esta genial dado que te permite para el codigo mientras se esta ejecutando en ese punto y saltar a la solapa de script, alli podrás seguir el codigo con el debugger lo que te simplifica la vida bastante. Podríamos decir que es un breakpoint declarado en el código.

Hay muchísimas cosas más para investigar sobre este excelente herramienta, pero este es un buen punto de partida para largar con firebug. Les dejo los links a los sites que me sirvieron para cultivar el conocimiento.

http://getfirebug.com/logging

http://getfirebug.com/commandline

http://ubuntulife.wordpress.com/2008/10/16/escribir-trazas-javascript-en-la-consola-de-firebug/

http://docs.aptana.com/docs/index.php/Writing_to_the_Firebug_console

http://www.anieto2k.com/2007/03/07/firebug-api-de-la-consola/

http://www.desarrolloweb.com/articulos/funciones-api-consola-firebug-ii.html