A lo largo de este artículo trataremos sobre el funcionamiento y ventajas que trae el plugin (addon) FireBug para Firefox. Este es un software definido como una extensión del navegador que ofrece una serie de actividades para optimizar los recursos a la hora de pensar en el desarrollo web. Permite un conjunto de acciones relacionadas a la corrección de errores, y al trabajo con Javascript, HTML y CSS en el sitio web. Lo interesante de este software, además de ser gratis y “open source”, es que permite que la realización de los cambios se hagan en tiempo real.

En cuánto a HTML, con Firebug pueden encontrarse elementos HTML dentro del sitio con gran velocidad y facilidad. Mediante la ventana “View Source” que ofrece Firefox, el plugin permite ver el estado actual de HTML. A su vez, habilita la visualización de todos los cambios realizados, de modo resaltado (dado que en una página basada en Javascript, el HTML constantemente se ve modificado). También se puede crear y editar HTML en el acto comprobando los resultados al momento de escribirlos. Realizando un click en algún elemento del sitio se puede modificarlo de modo completo a través de la opción Edit HTML del menú. El método de búsqueda es mucho más óptimo con la barra de herramientas que ofrece (FireBug´s toolbar) dado que encuentra la fuente HTML que estás buscando de modo inmediato al tipearla en la quick search box. 

En lo que refiere a Javascript también permite encontrar dichos elementos de un modo rápido, y además permite tener el control de la ejecución, dado que brinda la posibilidad de ser configurado para detener su ejecución en una determinada línea. Para lograrlo sólo se deberá clickear en el número de línea deseado y estará activado allí (mostrado por un icono rojo) el punto de detención. Esto habilita luego de ser pausado el debugger un seguimiento línea por línea en el caso de necesitar una mejor observación de cómo las variables se ven afectadas en ese momento.

Es una herramienta fundamental a la hora de encontrar y corregir errores basados en XML, Javascript o CSS. Firebug muestra de modo inmediato cuando se produce algún error, brindando toda la información y datos posibles al respecto. Cuenta con un icono que funciona a modo de indicador cuando detecta errores (nos damos cuenta cuando cambia su color de verde a rojo). Por ejemplo, con errores en JavaScript nos encontraremos con una detallada información acerca del mismo, dónde se nos indicará el archivo y la línea de ubicación.

En relación a lo que ofrece en materia de CSS, la rapidez con que se pueden operar los cambios resulta sorprendente. Editar elementos CSS es sumamente sencillo y se logra cliqueando sobre ellos donde aparecerá un “text editor” listo para tipear la modificación deseada, y cómo en los casos anteriores, el resultado se verá al instante. Ofrece, además, una pre-visualización de imágenes así como también la función de auto-completado, tan útil en algunos momentos.

Las funciones que trae consigo el FireBug de Firefox no se reducen a las aquí mencionadas. Estas comprenden sólo algunas de las ventajas que se pueden obtener gracias a este software.