Firebug

  • Por
Presentamos Firebug, una extensión para Firefox para hacer debug de páginas web en busca de errores HTML, CSS o Javascript.
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.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

socram_v

05/2/2008
Yo uso este plugin de Firefox y es de los mejores que he visto, mas que útil y no solo para los desarrolladores webs si no también para los que tienen por ejemplo simplemente un blog y quieran tocar cositas del css, recomendable 100% para todos los usuarios que quieran hacer retoques.
La verdad es que nunca el típico 'ensayo y error' fue tan cómodo con Firebug, jajaj

Franco

06/2/2008
Coincido plenamente con el articulo y el comentario anterior.Muy recomendable. He probado varios y es lejos lo mejor que he visto.
Facilita muchisimo encontrar errores en la ejecución de la pagina.
Es especialmente bueno en funciones javascript.
En el caso de funciones ajax incluso muestra la consulta realizada y el resultado obtenido,el tiempo que tarda la consulta, etc.

Se los recomiendo, pruebenlo, no se van a arrepentir.

Albarto

17/6/2010
Soy capaz de hacer una poesía de amor a Firebug
Alabado sea firebug, el rey de los complementos...
No podría vivir sin el, igual que google