Firebug es una extensión de Firefox (requiere Firefox 1.5 o siguientes) muy útil para trabajar con HTML, CSS y Javascript. Entre sus virtudes destaca:

  • una consola y un depurador de Javascript, que permite ver incluso las llamadas remotas realizadas vía Ajax
  • un inspector del código HTML y CSS de la página que estés visualizando
  • o la posibilidad de modificar elementos al vuelo (que los modifican localmente, en cuanto recargues seguirá todo como estaba antes)

En concreto, en este post me gustaría comentar cómo se utiliza el depurador de Javascript que viene incluído, y que permite que estemos desarrollando y depurando nuestro código sin tener que utilizar el incómodo alert. Para ello basta saber que Firefug incorpora un objeto Javascript llamado console, el cuál queda instanciado cada vez que cargamos cualquier página.

Dicho objeto tiene una serie de métodos útiles para volcar información en la consola del propio Firebug, mostrando mensajes de distinto tipo: debug, warning, error, fallo o simplemente un mensaje "neutral".

Y como la mejor forma de ver las cosas es con un ejemplo, ahí va uno. Fijáos en el siguiente HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
 <html lang="es">
 <head>
   <title>Probando Firefug</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 </head>
 
 <body>
 <div id="contenido">
 
   <div id="cuerpo">
     <script type="text/javascript">
 
       console.log("console.log");
       console.debug("console.debug");
       console.info("console.info");
       console.warn("console.warn");
       console.error("console.error");
       console.fail("console.fail");
     </script>
   </div>
 
 </div>
 
 </body>
 </html>

Se trata de un HTML con código Javascript incrustado, no de la forma más correcta, pero que sirve como ejemplo. En dicho código Javascript hay una serie de llamadas del tipo console.método, donde método son los distintos tipos de mensaje que ofrece el depurador de Firebug.

Si abrís dicha página en Firefox y desplegáis la consola de Firebug veréis algo como esto:

Vamos a analizar con un poco más en detalle cada una de las funciones, según para qué creo que se deberían de utilizar. Aquí debería de aclarar que no he encontrado ninuna documentación oficial del autor al respecto, así que me baso en mi intuición y mi (poco) sentido común:

  • console.log: se debería utilizar cuando queramos mostrar información útil al usuario en la consola, sin que ésta tenga que ser de debugging
  • console.debug: debería mostrar exclusivamente mensajes de debug, exclusivos sólo en desarrollo y en modo depuración, nunca en produción. Nótese que esta función muestra además en qué linea se ha invocado, con lo cuál podemos recuperar el contexto de la llamada en cualquier momento.

A partir de aquí, el resto de llamadas a console creo que están pensadas no para depurar y desarrollar, sino para mostrar información útil al usuario final (una vez la web ya está terminada y en producción), no al programador. Aunque claro, somos libres de utilizarlas para facilitarnos el desarrollo de nuestro código.

Mejor así que matándonos a alert's, ¿no?

Y con esto creo que hay suficiente. En un próximo post me gustaría terminar de repasar las posibilidades que ofrece el objeto console, como un pequeño contador para medir cuánto tarda en ejecutarse determinado código Javascript, y alguna sorpresa más.