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.

Leave a Reply

Your email address will not be published. Required fields are marked *