Vamos a hablar sobre Firebug, una extensión de Firefox muy útil para desarrolladores del web, que permite examinar minuciosamente cada uno de los elementos de la página, en busca de errores del código o fallos de presentación. Por medio de Firebug podemos controlar cualquier cosa que ocurre dentro de Firefox cuando carga cualquier página web. Permite examinar todos los elementos HTML, y además los estilos CSS y los códigos de scripting en Javascript que está ejecutando la página.

Antes que nada habría que comentar lo que son las extensiones de Firefox. Son una especie de plugins o añadidos que se pueden instalar de manera adicional en Firefox, para proveer al navegador de nuevas funcionalidades. Tenemos un manual que explica en detalle muchas más cosas acerca de las extensiones de Firefox.

Pues Firebug es una de esas extensiones imprescindibles para desarrolladores, que nos puede ahorrar muchos dolores de cabeza, puesto que ayuda a buscar errores o entender posibles comportamientos anómalos o no esperados de la página que estamos desarrollando. Con Firebug podemos examinar cada parte de la página, saber de qué elementos depende dentro de la jerarquía de etiquetas HTML y todos los estilos CSS que se aplican. Además de permitir alterar en línea cualquier etiqueta o declaración de estilos, para ver el resultado sin tener que editar el código y recargar el documento. Además, nos da informaciones completas de los script Javascript y los errores que se puedan producir en la ejecución del código.

Como cualquier extensión de Firefox, es gratuita y libre de uso, con lo que cualquiera se puede aprovechar de esta importante ventaja para desarrollar webs libres de errores.

Entre las características de la extensión destacamos:

• Se puede abrir Firebug en una nueva ventana o bien en la parte de debajo de la ventana del navegador. Una vez instalada la extensión, en el menú de herramientas tenemos las opciones de Firebug, para ponerlo en funcionamiento y definir donde queremos que aparezca la consola.
• Se puede inspeccionar cualquier etiqueta HTML y editarla desde el propio Firebug, para ver los resultados en la página al instante.
• Lo mismo con los estilos CSS, podemos ver qué estilos afectan a cada área o elemento de la página y editarlos en el instante por medio de la consola Firebug, viendo los resultados en la propia página.
• Tiene herramientas para ver cómo se maquetan los elementos de la página con las propiedades CSS, con reglas de en unidades de píxel, para ver donde se sitúa cada elemento y por qué, los márgenes, padding, etc.
• Otra cosa interesante que ofrece es una visualización del tiempo que ocupa al navegador descargar o poner en marcha cada uno de los elementos que componen la página, lo que nos puede dar una idea de qué consumos de tiempo tiene cada parte, como imágenes, banners, scripts externos, etc. Muy útil si tu página se retrasa en cargar y no sabes exactamente por qué.
• Permite debug del código Javascript. Además, cuando algo no funciona bien, Firebug lo resalta para que lo veas fácilmente y te da informaciones sobre lo que puede estar ocurriendo.
• Permite explorar la jerarquía Javascript de componentes del navegador (DOM).

Puedes ejecutar código Javascript en el instante, para ver cómo reacciona la página.

En definitiva, merece la pena instalar la extensión para Firefox Firebug y comprobar por nosotros mismos las toneladas de información que puede extraer de la página y lo fácil que es explorar todos sus componentes en busca de errores o fallos.

Firebug es sin duda una de las extensiones que he visto más útiles para nosotros los desarrolladores.

Entra en el sitio de descarga de Firebug para más información.