En este artículo nos vamos a poner manos a la obra y empezar a analizar y trabajar con la consola de Firebug desde sentencias Javascript. Para el que no sepa exactamente qué es esto, recomendamos leer el artículo API de consola de Firebug, en el que aprenderemos además que Firebug funciona en otros clientes web aparte de Firefox, ya que se puede emular en cualquier navegador a través del script Firebug Lite.

Así pues, comencemos a usar las funciones, o mejor dicho métodos, del API de la consola de Firebug, comenzando por las más sencillas como es console.log() o algunas funciones de similares características como console.info() o console.warn(). Todos estos métodos del objeto console sirven para enviar y mostrar mensajes en la consola de Firebug.

Mostraremos a continuación los métodos disponibles para comunicar con la consola de Firebug, junto con explicaciones y ejemplos que puedan hacer más sencillo de entender la utilidad de este API.

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

Sirve para enviar mensajes normales a la consola de Firebug. Podemos enviar tantos parámetros como deseemos y todos los contenidos de esas variables o literales o lo que sea que enviemos, se mostrarán en la misma línea de la consola, separados por espacios en blanco.

var x = 23;
var y = "hola"
console.log("La variable x tiene el valor ", x, " y la variable y ", y);
//imprimiría en la consola:
//La variable x tiene el valor 23 y la variable y hola

Un tema interesante sobre el console.log() que no todo el mundo sabe es que se puede utilizar una notación especial para sustituir en una cadena ciertos valores por el contenido de variables. Para ello en el primer parámetro de console.log() podemos enviar una cadena con caracteres de control o patrones como %d, %s o %o. Estos caracteres de control se sustituirán por el contenido de los siguientes parámetros indicados en console.log(). Lo veremos fácilmente con un ejemplo.

var nombre = "miguel";
var edad = 35;
console.log("Mi nombre es %s y mi edad es %d años", nombre, edad);
//imprimiría Mi nombre es miguel y mi edad es 35 años

Como vemos, el primer patrón %s se sustituye con el segundo parámetro y el segundo carácter de control %d se sustituye por el tercer parámetro. El tipo de patrón especifica el tipo de dato que tiene aquel parámetro que deseamos sustituir.

• %s indica que el dato a sustituir es un string,
• %d, %i sirven para indicar enteros,
• %f indica números con coma flotante,
• %o sirve para indicar que el parámetro a sustituir es un objeto.

Aunque el dato no se corresponda, Javascript lo tratará como tal. Por ejemplo, si indicamos %s para un parámetro que realmente es un objeto, en la consola se mostrará como una cadena y no como un objeto. Por decirlo de alguna manera, el dato se convierte atendiendo al patrón que indiquemos.

var miArray = [23,45,"hola","loquesea"];
console.log(miArray); //muestra el array como un array
console.log("mira este array %s formateado como string", miArray); //muestra el array como string

Es muy interesante el hecho que cuando se muestran en consola estructuras de datos un poco más complejos, en la propia consola se puede hacer clic sobre esos elementos para examinarlos en detalle.

var encabezado = document.getElementById("encabezado");
console.log(encabezado);
console.log("El encabezado es %s!!", encabezado);
console.log("El encabezado es %o!!", encabezado);

En este ejemplo accedemos a un elemento del DOM de la página y lo guardamos en un objeto almacenado en la variable encabezado. Luego mostrarmos con console.log() esa variable, con lo que aparece el objeto y se podrá hacer clic sobre él para encontrar más información. Luego se muestra el objeto sustituyéndolo por un patrón %s, con lo cual se mostrará el objeto como un string y no se podrá hacer clic sobre él. Por último hacemos otra sustitución, pero con el carácter de control %o, que sirve para mostrar objetos, con lo que sí se podrá hacer clic para ver más cosas sobre él.

Podríamos indicar más caracteres de control para sustitución, siempre que indiquemos tantos parámetros como sean necesarios para sustituir. Además, si colocamos al final más parámetros que patrones hemos utilizado en la primera cadena, simplemente se colocará el valor de esos parámetros al final de la línea de consola, separados del resto por un espacio en blanco.

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

Esto sirve para enviar un mensaje de "debug", que realmente no es más que un mensaje exactamente igual que el que hemos explicado para la función log(), con la diferencia que en los mensajes creados con el método console.debug() tendrán un enlace al lado con el número de línea de código donde aparece esa llamada. Esa señal se podrá hacer clic para que Firebug nos muestre exactamente dónde está la línea de código relacionada.

console.debug("Haciendo debug en vez de log!! soy %s y sigo trabajando con %o que es un %s", nombre, encabezado, encabezado);

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

Esta función es igual que console.debug(), con la particularidad que al principio del mensaje aparecerá una pequeña imagen con un icono con una "i" de "información".

console.info("Haciendo info en vez de log!! Sigo trabajando con %o y el %o", encabezado, miArray);

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

Este método es exactamente igual que console.info(), pero aparecerá un icono de color amarillo chillón, con una admiración que indica que es una advertencia (Warning).

console.warn("Haciendo warn en vez de log!! Sigo trabajando con %s y %s", encabezado, miArray);

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

Este método es igual que el anterior, pero el mensaje aparecerá con color de texto en rojo y con un icono, también de color rojo y con un aspa, para simbolizar el error.

console.error("Haciendo error en vez de log!! Sigo trabajando con %o y con %s", miArray, encabezado);

console.assert(expression[, object, ...])

El método console.assert() sirve para enviar mensajes a la consola cuando no se cumple una condición deseada. Como primer parámetro enviamos una expresión que se evaluará como positivo o negativo. En caso negativo se mostrará el contenido de las variables que se indiquen a continuación y se mostrará en la consola otro tipo de información sobre la sentencia donde estaba el assert() cuya expresión no se ha cumplido.

var nombre = "miguel";
console.assert(nombre=="miguel", "El nombre es miguel")
console.assert(nombre!="miguel", "El nombre NO es miguel");

En el primer assert() la expresión nombre=="miguel" se cumple, luego no se muestra nada. En el segundo assert(), la expresión nombre!="miguel" no se cumple, luego en este caso sí se mostrará un mensaje y la traza del lugar del código fuente donde se encontraba esta llamada a assert().

Para los interesados, hemos puesto a vuestra disposición una página con un script que contiene los ejemplos en marcha relatados en este artículo.

En el próximo artículo seguiremos viendo otros métodos útiles para enviar mensajes a la consola de Firebug.