Probando Firebug Lite 1.2

Introducción.

Firebug es una de los mejores acompañantes del desarrollador web que conozco actualmente, tiene muchas funciones que facilitan enormemente el desarrollo y la depuración de las aplicaciones web.  En mi caso me facilita la revisión de problemas en cuanto a los CSS y la estructura del árbol DOM de la página se refiere, especialmente cuando se está manipulando dinámicamente con Javascript y AJAX.

Entre sus principales características se cuentan las siguientes.

  • Integración con Firefox.
  • Inspección y edición del árbol DOM y el HTML.
  • Edición en línea del CSS.
  • Visualización de las métricas del CSS.
  • Monitoreo de la actividad durante la carga de las páginas.
  • Depuración y perfil de los códigos Javascript.
  • Evaluación dinámica de código Javascript.
  • Mensajes de depuración.
  • Integración con múltiples complementos que aumentan su funcionalidad.

Esta herramienta, como se podría inferir de su nombre, ha sido desarrollada como un complemento de Firefox, lo cual acostumbra a no ser un problema ya que FF es el navegador preferido por muchos usuarios, especialmente desarrolladores y por mi.  El problema surge cuando debo iniciar Windows para probar los sitios con el -muy- problemático Internet Explorer que es ya conocido por su poco apego a las normas y estándares establecidos.  Repetir la frase “funciona perfecto con FF pero terrible con IE” es mucho mas común que la casi nunca mencionada versión inversa.

En algunas ocasiones he probado algunos complementos para IE que prometen funciones similares sin embargo he tenido poco éxito con ellas.  Hace poco leí que Microsoft estaba preparando un complemento propietario para su navegador y que permitiría realizar estas maravillas y hasta mas.

Mientras aparece una mejor opción descubrí que es posible utilizar una versión Lite (reducida) de Firebug incluye parte de las funcionalidades de la versión completa.  En mi opinión personal, incluye las tres características básicas que mas necesito y que me hacen terrible falta cuando utilizo el IE: Mejor visualización de errores (consola), Inspección de los objetos del DOM y la revisión de sus estilos CSS.

Formas de uso.

El método rápido.

Utilizando este método no es necesario modificar el código fuente de la página, este se actualiza de manera dinámica.  Es muy útil para utilizar el complemento sobre sitios que no estan dentro de nuestro control, sin embargo no permite iniciarlo desde la carga de la página por lo cual no alcanza a captar los mensajes y errores que esta genere antes de activarlo.

Para utilizar este método es necesario crear un favorito en la barra de Internet Explorer (o del navegador que se esté utilizando).

Favorito FirebugLite en IE8
Favorito FirebugLite en IE8

La dirección web de este favorito deberá estar apuntando a la siguiente invocación de Javascript.

javascript:var%20firebug=document.createElement(‘script’);firebug.setAttribute(‘src’,’http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js’);document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

Para utilizar el complemento simplemente será necesario presionar el botón del favorito (Firebug Lite) cuando se desee activarlo.

Método invasivo.

Para utilizar este método es necesario modificar el contenido de las páginas web, es decir, útil para depurar las páginas que uno mismo está desarrollando.  Para utilizarlo es necesario agregar la siguiente inclusión de código Javascript en la sección HEAD de la página.

<script type=’text/javascript’
src=’http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js’></script>

De manera opcional es posible modificar el alto del panel de Firebug mediante la inclusión de la siguiente instrucción.

<script type=”text/javascript”>
firebug.env.height = 200;  // pixels
</script>

A partir del momento de la carga se cuenta con el acceso a la consola de Firebug Lite para esa página.

Ejemplo de Firebug Lite en una página web
Ejemplo de Firebug Lite en una página web

Inclusive es posible generar mensajes de depuración a la consola con instrucciones como la siguiente.

console.log(“hola”);

Conclusiones.

Firebug Lite es efectivamente una versión reducida de Firebug cuya principal ventaja es la de poder utilizarse con diferentes navegadores distintos a Firefox.

Las no muy extensas pruebas que he realizado hasta ahora me han mostrado algunas de sus limitaciones y diferencias con respecto a la versión completa, como por ejemplo cuando se inspecciona (Inspect) un objeto DOM a pesar de que si se actualizó la selección de la etiqueta en el árbol HTML, las propiedades que se estaban mostrando no se actualizaron hasta que hice clic sobre la el nodo HTML del componente.

En conclusión, la versión Lite no es tan completa ni poderosa como la versión completa por obvias razones, su forma de implementación, sin embargo es un gran alivio para quienes de vez en cuando tenemos que intentar depurar problemas en navegadores como IE que a juzgar por la precisión de sus mensajes, parece no ser amigo de los desarrolladores.

De momento el complemento Lite va en su versión 1.2 mientras que el complemento completo va en la 1.4.  Hay que estar pendientes de nuevas actualizaciones y mejoras.

Enlaces.

Bug de IE – radiobutton olvidadizos al ser movidos entre el DOM

Esta semana tuve que invertir (perder) mi tiempo intentando entender y solucionar un comportamiento extraño de IE que resultó ser un bug que aparentemente existe en todas las versiones de este navegador y que fue solucionado según dicen en la versión 8 beta2.

A grandes razgos el problema sucede cuando se tiene una lista de radiobuttons (no sucede con otros componentes incluyendo el text o los checkboxes) y esta es trasladada entre el árbol DOM de la página, como por ejemplo cuando se mueve el formulario de un div a otro.  Cuando esto sucede, a IE se le olvida mágicamente cual era el radio seleccionado.

Para no volver a perder el tiempo con este error de IE hice una pequeña implementación de un formulario que reproduce las condiciones del error y le indica al usuario si el navegador utilizado padece o no del bug.

Inicialmente se tiene un formulario dentro del div seccion1 y otro div seccion2 vacío.

<div id='seccion1'>
    <form id='formulario' action='#' onSubmit='return procesarEnvio()'>

        <input type='radio' id='uno'    name='grupo' value='1' />
        <label for="uno">Primera opción.</label><br />
        <input type='radio' id='dos'    name='grupo' value='2' />
        <label for="dos">Segunda opción.</label><br />
        <input type='radio' id='tres'   name='grupo' value='3' />
        <label for="tres">Tercera opción.</label><br />
        <input type='radio' id='cuatro' name='grupo' value='4' />
        <label for="cuatro">Cuarta opción.</label><br />
        <input type='radio' id='cinco'  name='grupo' value='5' />
        <label for="cinco">Quinta opción.</label><br />

        <br />

        <input type='submit' value='Enviar' />

    </form>
</div>

<div id='seccion2'>
</div>

Cuando el usuario envía el formulario se obtiene el radio seleccionado.

        var seleccion1 = obtSeleccionValor('seccion1', 'formulario', 'grupo');

        alert("[1] El 'radiobutton' seleccionado es: " + seleccion1);

No hay problemas.  Para reproducir las condiciones del bug, se mueve, para este ejemplo con la ayuda de Prototype, al formulario de la seccion1 a la seccion2.

        var formulario = $$('#seccion1 #formulario').first();

        $('seccion2').insert(formulario);

Se vuelve a consultar cual es el radio seleccionado.

        var seleccion2 = obtSeleccionValor('seccion2', 'formulario', 'grupo');

        alert("[2] El 'radiobutton' seleccionado es: " + seleccion2);

Si seleccion1 == seleccion2 significa que se está utilizando un buen navegador, de lo contrario significa que se está utilizando un navegador ampliamente conocido por desconocer estándares y ser la pesadilla de los desarrolladores.

Desafortunadamente no encontré una solución elegante para este problema diferente de almacenar temporalmente cual es el radio seleccionado antes de realizar su movimiento en el DOM y actualizar su valor posteriormente.

Esto es práctico de hacer con Prototype.

        var formulario = $$('#' + secc + ' #' + form).first();

        var seleccion = formulario.getInputs('radio', grp).find(
            function(re)
            {
                return re.checked;
            });

Esta sección de código obtiene los radios del formulario form que se encuentran contenidos en el div secc, que pertenecen al grupo grp y que se encuentran seleccionados.  seleccion será undefined si ninguno de los radios se encuentra actualmente seleccionado.

        var seleccion = formulario.getInputs('radio', grp);

        if(seleccion[sel] != undefined)
              seleccion[sel].checked = true;

Esta sección corrige el valor seleccionado (sel) entre los radios (seleccion).  Dependiendo de la información contenida en los value y referenciada por sel, podrá ser una mejor opción recorrer la seleccion y realizar las comparaciones necesarias para activar (checked) al radio adecuado.

Utilice la aplicación demostración para verificar la presencia del bug en su navegador y para revisar con mayor precisión su código fuente.

Enlace: BugIERadioMovDom 0.1.

Internet Explorer Developer Toolbar

Desarrollar software es mi hobby y mi profesión. Desarrollar software web es interesante y divertido. Desarrollar software web para Internet Explorer es una pesadilla real e interminable.

Ese “navegador” no sólo no incluye la implementación completa de las especificaciones y los estándares sino que las que supuestamente incluye funcionan mal, peor aún, la distribución estándar de IE ni siquiera indica que hubo un error, simplemente falla, o se limita a decir que tuvo uno sin indicar en donde o su naturaleza. Como si fuera poco no cuenta con las mismas herramientas de desarrollo con que cuenta el glorioso Firefox. Me refiero por supuesto al Web Developer Extension de Chris Pederick y a Firebug, sin ellas no hay vida en el mundo del desarrollo de software web.

Pero como si la vida fuera perfecta no sería vida, no existen versiones de estos paquetes para IE. Ya que es imposible deshacese del soporte para ese navegador en algunos lugares: “tiene que soportar IE porque no nos imaginamos a los usuarios instalando otro software diferente, seguro se confunden“, he tenido que buscar algunas herramientas que mitiguen el ya muy conocido: “en IE no funciona, pero si en FF funciona perfecto“.

Hace unos meses estuve probando un par que eran comerciales pero que se podían utilizar libremente a nivel personal, sin embargo nunca funcionaron como esperaba cuando realmente las necesité. Ahora voy a empezar a probar el Internet Explorer Developer Toolbar desarrollado por el mismo Microsoft. Parece ser una versión reducida de Firebug y parece no haber sido actualizada desde su versión 1.0.x en 2007/09.

Por lo menos he visto que permite realizar en cierta medida algunos de mis principales requerimientos:

  • Inspección de elementos gráficos.
  • Recorrido por el árbol DOM.
  • Modificación del documento en ejecución: estructura y CSS.
    Manipulación del caché.
  • Toma de medidas en pantalla.
  • Captura de color en pantalla.
  • Cambio de tamaño de la ventana para simular diferentes resoluciones.
  • Algunas validaciones.

Enlace: Internet Explorer Developer Toolbar.

position:fixed en IE

Nada funciona bien en IE. La gente inteligente debería utilizar Firefox únicamente. Desarrollar para IE es totalmente frustrante, no se adhiere completamente a los estándares y lo que se desarrolla para Firefox de CSS y JavaScript casi nunca le funciona. Hoy tuve un capítulo mas de esta historia.

Mi IE 7.0.5730.11 no entiende la instrucción position:fixed de CSS!

Tuve que implementar la solución expuesta por http://www.gunlaug.no/contents/wd_additions_15.html.

* html div#miDivId
{
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + 5: document.body.scrollTop + 5);
}

Véalo en vivo y a todo color siguiendo este enlace.