Funciones del API de consola de Firebug II

El API de la consola de Firebug sirve para enviar mensajes a la consola de la extensión de Firefox, con los que se puede analizar mejor el estado de los programas a medida que se ejecutan en el navegador. Como se ha visto en el artículo API Javascript de la consola de Firebug, es una manera útil de depurar las aplicaciones Javascript.

En el artículo anterior ya comenzamos a mostrar una primera lista de funciones que se pueden usar con el API de la consola. En este segundo capítulo vamos a completar este listado y a ofrecer algunos ejemplos más.

console.dir(object)

Muestra una lista completa de las propiedades del objeto, que sería exactamente igual a la lista de propiedades que se accede al inspeccionar un objeto desde la pestaña DOM de Firebug.

var miFruta = {
   "nombre": "Mandarina",
   "color": "Naranja",
   "Acidez": "Moderada",
   "comer": function(){
      alert("Pelo y luego me como la mandarina");
   }
}
console.dir(miFruta);

Esto mostrará el contenido completo del objeto que se ha cargado en la variable miFruta(). La diferencia con console.log() y console.dir() es que al hacer el log() sobre un objeto nos aparece el nombre del objeto con un link para poder examinarlo. Si pulsamos el link veremos exactamente lo mismo que si hacemos un console.dir() directamente.

Por ejemplo, si se examina un elemento del DOM de Javascript, como este:

var encabezado = document.getElementById("encabezado");
console.dir(encabezado);

Veremos toda la lista de los atributos de ese elemento de la página, igual que lo que veríamos en la pestaña de DOM de Firebug al inspeccionar ese elemento.

console.dirxml(node)

Al invocar al método console.dirxml() tenemos que enviar una referencia a un nodo de la página. Un nodo es un objeto del DOM de la página relativo a cualquier elemento HTML existente. Recibiremos como respuesta en la consola un mensaje que nos mostrará todo el código HTML de ese elemento y sus hijos, tal como lo veríamos al inspeccionar el código HTML de cualquier elemento de la página con la herramienta de inspeccionar de Firebug.

console.dirxml(document.getElementById("milista"));
//con eso conseguimos el código de una supuesta lista que tiene el id="milista"

console.trace()

Muestra una lista de funciones que permiten recorrer la traza de la lógica del script. Por ejemplo, si estamos dentro de una función y hacemos console.trace() se mostrará esa función y toda la pila de llamadas que se puedan haber encadenado, al llamarse desde unas funciones a otras, hasta llegar a ésta primera. Además, todas las funciones serán enlaces que nos llevarán directamente al código de las mismas.

function paraTraza(param){
   console.trace();
}
function probarFirebug(){
   paraTraza(encabezado);
}
probarFirebug();

En este supuesto se llama primero a probarFirebug() y desde aquí se llama a paraTraza(). Entonces en paraTraza() hacemos un console.trace(), con lo que obtenemos la traza completa de llamadas a funciones hasta llegar al lugar donde está el console.trace(). En este caso serían dos funciones, primero probarFirebug() y luego paraTraza(). Además, en el listado de la traza, podremos pulsar sobre esas funciones para acceder a su código en la pestaña de script de Firebug.

console.group(object[, object, ...])

Esta función del API de la consola nos permite agrupar varios mensajes en la propia consola de Firebug, lo que puede ser útil para ordenar un poco la información que aparece en la consola. Estos mensajes del mismo grupo aparecerán identados y con un icono de para expandir o contraer la lista completa de elementos que haya en el grupo.

A la propia función console.group() se le indican parámetros con cadenas o variables que sirvan para formar el titular de ese grupo.

Además, como se podrá ver en el siguiente ejemplo, se debe indicar con una llamada a console.groupEnd() el momento en el que deseamos cerrar el grupo.

console.group("migrupo");
console.log(1);
console.log(2);
console.log(3);
console.groupEnd();

console.groupCollapsed(object[, object, ...])

Lo mismo que console.group() con la diferencia que el grupo aparecerá en la consola de Firebug sin expandir. Podremos mirar el contenido del grupo completo pulsando el icono que hay para expandir sus elementos.

console.groupEnd()

Cierra el útimo de los grupos abiertos en la consola. Cierra tanto grupos creados con console.group() como grupos creados con el método console.groupCollapsed().

console.time(name)

Sirve para crear un contador de tiempo, que podremos detener con console.timeEnd(name) y ver así la cantidad de milisegundos invertidos en ejecutar scripts. Veremos ejemplos de este método en un artículo más adelante.

console.timeEnd(name)

Cierra una línea de tiempo y muestra la cantidad de milisegundos transcurridos. También veremos un ejemplo más adelante.

console.profile([title])

Pone en marcha la función "perfilar" de Firebug, que permite (una vez detenida esta función perfilar) tener un reporte de las funciones Javascript invocadas y el tiempo destinado para su ejecución, entre otras cosas. Esta función la veremos en un artículo posterior.

console.profileEnd()

Detiene la funcionalidad "perfilar" Javascript de Firebug.

console.count([title])

Cuenta el número de veces que un programa pasa por un lugar.

for (j=0; j<5; j++){
   console.count("Iteraciones en el bucle for-j: ");
}

Mostrará en la consola un mensaje como "Iteraciones en el bucle for-j: 5". Si volvemos a iterar ese bucle, el mensaje de consola se actualizaría para mostrar que las iteraciones ahora son 10 y cada vez que general que se pase por una llamada a console.count() de actualizará el mensaje incrementando el número de veces que se ejecutó esa sentencia.

Se pueden llevar varias cuentas de paso con console.count() al mismo tiempo. Para aclararse a qué contador se debe acumular se tiene que indicar como parámetro en el método el nombre del contador que se desea actualizar.

console.exception(error-object[, object, ...])

Muestra un mensaje de error y un listado de la traza de funciones Javascript invocadas hasta llegar al punto donde se produjo una excepción. Para comprenderlo, fijémonos en esta lista de funciones:

function funcionPila1() {
   funcionPila2();
}
function funcionPila2() {
   funcionPila3();
}
function funcionPila3() {
   throw new Error('lanzando excepción');
}

Son funciones que se llaman la una a la otra, hasta llegar a funcionPila3() que lanza una excepción. Ahora podemos ver el siguiente código try-catch:

try {
   funcionPila1();
} catch (miExcepcion) {
   console.exception(miExcepcion, 'Encontrada una excepcion');
}

Se intenta ejecutar funcionPila1() dentro de un bloque try. Eso provocará una llamada sucesiva a varias funciones, que se invocan unas a otras hasta llegar a funcionPila3(), que lanza una excepción. Al haberse captado esa excepción, se ejecutar el bloque catch y el método console.exception().

Como resultado obtendremos la excepción encontrada junto con la lista de llamadas a funciones ejecutadas, en orden inverso, para llegar a esa excepción.

console.table(data[, columns])

Muestra un reporte de las propiedades de un objeto, array o lo que sea, pero en un formato tabulado que permite una lectura más cómoda. Antes de acabar, queremos presentaros una página donde hemos puesto en marcha los ejemplos de uso del API de la consola relatados en este artículo.

En el siguiente artículo veremos ejemplos de unas de las funciones del API de consola que no hemos analizado en el anterior texto. Las funciones que nos hemos dejado sirven para analizar el tiempo de procesamiento de los scripts Javascript.