Todo desarrollador/maquetador web que se precie, conoce y usa Firebug.  Una de las mejores cualidades que tiene, es que se pueden “extender” sus características a través de otras extensiones, que se integran a la perfección con él.

Ya vimos el ejemplo de Google Page Speed, y ahora le toca el turno a FireRainbow.

FireRainbow es una extensión para Firefox que se encarga de colorear la sintaxis de Javascript que muestra su “hermano” Firebug. Tras instalarlo, tan solo debemos ir a la pestaña Script de Firebug para ver los resultados.

FireRainbow dispone además, de casi 30 temas diferentes para visualizar nuestro código, que además son fácilmente editables y muy sencillos de crear.

Descarga FireRainbow

Listado de temas para FireRainbow

Si usas Firefox, un método para hacer un poco más “elegante” esta depuración, es utilizar la variable console, una variable global que Firebug añade por defecto las páginas abiertas con nuestro navegador favorito.

Su funcionamiento es sencillo. Dentro del código javascript, tan solo tenemos que hacer la siguiente llamada:

// Código Javascript
console.log('Esta cadena se imprimirá en la consola de Firebug');
// Más código Javascript

El primer argumento que debe recibir log es una cadena, que puede contener indicadores de tipo, muy parecido a las funciones printf() y sprintf() de PHP.

console.log("El %s saltó sobre %d edificios", animal, contador);

Sin embargo,console.log() también permite este otro formato:

console.log("El", animal, "saltó sobre", contador, "edificios");

Estos dos formatos, pueden combinarse. Si se utilizan indicadores de tipo, y se proporcionan más argumentos que patrones, el resto de argumentos se añadirán a continuación separados por un espacio:

console.log("Me llamo %s y me gusta hacer:", miNombre, cosa1, cosa2, cosag3);

Si quieres conocer todas las opciones, de esta variable, puedes encontrar más información en la web oficial de firebug.