Firebug: una valiosa herramienta para desarrolladores web

Firebug es un complemento de Firefox con licencia Open Source, pensado para diseñadores y programadores web. Ofrece múltiples opciones que nos permiten analizar el código HTML, CSS y JavaScript de una web o revisar su estructura DOM. Se puede descargar desde el sitio oficial de Mozilla, en el siguiente enlace: https://addons.mozilla.org/es/firefox/addon/firebug/

Cuando instalamos la extensión, en la parte derecha de la barra superior de Firefox aparece una mosca, que es su particular logo. Al pulsar sobre la imagen, ésta cambia de color y en la parte inferior de la pantalla se despliega una ventana desde la que accedemos al código fuente de la web que tengamos abierta en ese momento. De este modo, podemos conocer cómo están hechos determinados detalles que nos resulten interesantes. Un tema en el que nos insistía el profesor que tuve de diseño de interfaces, era sobre la importancia de navegar por Internet de una manera crítica, analizando los sitios que visitásemos y aprendiendo de lo que hacían correctamente los demás.

Aparte de esta funcionalidad, el motivo fundamental por el que Firebug es tan valioso, es que puedes aplicar modificaciones en tiempo real a una web que estés diseñando. Éstas lógicamente no se guardarán en el código, pero te permitirán realizar pruebas de una manera mucho más rápida que si tuvieses que editar uno o varios ficheros de tu sitio y luego ver el resultado.

A modo de ejemplo, voy a variar el color del menú del portafolio de esta web. En Firebug hago clic sobre el símbolo del cursor (parte izquierda de la ventana que se abre al activar la herramienta) y selecciono el elemento que quiero editar. Dentro de Estilo, en la zona derecha de la pestaña HTML, puedo ir probando colores hasta obtener el que más me guste. En este caso, he variado el color azul corporativo del menú por un negro puro. Gracias a la aplicación, conozco cuál es la clase y el atributo modificado, aparte del archivo y línea afectada. Si el color negro me gustase más que el azul, sólo tendría que ir al fichero CSS en cuestión y aplicar el cambio de manera permanente. En caso contrario, con F5 vuelvo al estado inicial.