el 33

Debug en Javascript con la consola de Firebug

Tras un tiempo sin actividad alguna, espero volver al mismo ritmo que los dos primeros meses de blog. Ahora que estoy trabajando bastante con Javascript/AJAX, creo que puede resultar útil escribir sobre cómo utilizar Firebug para realizar un buen debug de una aplicación web.

El modo más simple para saber qué está haciendo una aplicación en cada momento sería una función parecida a esta:

function printTestInfo( msg )
{
    var container = document.getElementById("systemInfo");
    container.innerHTML += msg + "
";
}

Muy simple y muy limitada, lo mismo puedes hacer llenando de alerts tu código. Para cuando tienes unas pocas líneas de código puede estar bien, pero cuando tiener muchas llamadas AJAX y trabajas mucho con el DOM no es suficiente.

Firebug se ha hecho indispensable para cualquier desarrollador web, te ahorra mucho tiempo y poco a poco están saliendo plugins que lo hacen mucho más potente. En mi caso lo que más utilizo es: HTML y CSS inspector, inspeccionar el árbol DOM, la extensión FireCookie, YSlow de vez en cuando, el debug y profile de Javascript, y por último el motivo de este post, la consola.

La consola aparte de incorporar un command line muy potente y toda la información necesaria sobre llamadas AJAX realizadas, dispone de una API que hace que la función anterior no la vuelvas a utilizar. Es un objeto que dispone de una serie de métodos muy útiles para mostar información en la consola de Firebug.

Tenéis el listado completo de métodos en la documentación de Firebug, que recomiendo echarle un vistazo porque hay muchas opciones que no sabes ni que existen. No se le puede pedir más, pero sinceramente hecho en falta que el método group lleve un identificador para poder agrupar mensajes de distintos módulos y no correlativamente cómo lo hace actualmente.

Aquí tenes un ejemplo de uso:

var callbackDasSources = {
 
    success: function(o){
         console.info('DAS REGISTRY: Success ajax request to retrieve das registry');
 
         console.log('DAS REGISTRY: Parsing ...');
         dasSources._parseDasSources(o.responseXML);
 
         console.log('DAS REGISTRY: Generating select form...');
         dasSources._printDasSources();
    },
 
    failure: function(o){
        console.error('DAS REGISTRY: Failure retrieving DAS sources..');
    }
};

Y a la consola en funcionamiento (con la extensión FireCookie):

Ahora bien, todo esto esta muy bien pero sólo sirve para Firefox. Si ejecutas tu sitio web en Internet Explorer deja de ser funcional mostrando un mensaje que no conoce el objeto console (con suerte te muestra el error, porque es algo bastante frustante el mensaje “Runtime error”). Los de Firebug han hecho un pequeño script en el que definen el objeto con los métodos vacíos, pero bueno si le añades un par de líneas usando la función printTestInfo anterior puede llegar a resultar algo útil:

if (!window.console || !console.firebug)
{
    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
                 "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
 
    window.console = {};
    for (var i = 0; i < names.length; ++i)
        window.console[names[i]] = function() {
            for ( var j = 0; j < arguments.length; ++j)
                printTestInfo(arguments[j])
        }
}

El post iba a ser más largo, pero entonces no sabía que poner de título por lo que lo dejo para unos días más tarde : )