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 : )

Alojamiento gratuito por un año con Dominios Low Cost

Leyendo Webmaster Libre me encontré con que regalaban 100 códigos para hosting gratuito durante un año en Dominios Low Cost, nueva empresa española que está dispuesta a hacer el mismo tipo de ofertas que hizo en su día 1&1, éste blog está alojado allí y me ha ido bien por el momento.

La oferta de hosting no ofrece un dominio y para activar el vale es necesario disponer de uno. Hay muchos sitios web para registrar un dominio, aunque en la misma empresa hay precios muy competitivos. En mi caso ya tengo el código pero quiero pensarme un poco más el dominio a registrar, tenemos 2 meses para activar el vale.

Nos dan la opción de elegir entre 3 planes de hosting: Inicio, Avanzado Linux y Avanzado Windows. Lo más recomendable en mi opinión es el el plan avanzado Linux, pero si a alguien le interesa trabajar con ASP, Access y demás ya sabe cuál escoger…

Por lo que veo se han acabado los códigos de Webmaster Libre, pero hay más sitios que ofrecen dichos códigos:

• Un poco de mucho: sólo tienes que poner un comentario en su blog, quedan 79 50 en este momento¡
• SoyGik: aquí debes escribir un post en tu blog hablando sobre su entrada y ponerle un comentario.

Por último decir, que en la búsqueda de un dominio libre, es recomendable tener a mano ( en otra pestaña ) el registrador de dominios, ya que no me resultaron muy fiables las webs que te buscan dominios libres. No digo que no exista ninguna realmente fiable, pero me quitaron un par de dominios a los 10 o 20 minutos de estar libre… Yo aprendí la lección.

Update: La empresa ha tirado la casa por la ventana y regala 5000 dominios gratis con un mismo código¡ Más información en Bitecnia