Firebug es una extensión de código abierto orientada a la depuración web, probablemente la herramienta de desarrollo web más popular del mercado junto con su homónimo Chrome Inspector, teniendo este último cierta dificultad añadida y más orientado a un perfil de desarrollador fullstack. Firebug, que está disponible en su versión completa para Firefox y en versiones con funcionalidades limitadas para los navegadores principales, ofrece un enorme potencial y versatilidad tanto en el ámbito del diseño como del desarrollo web, permitiendo a su vez aumentar sus funcionalidades a través de un amplio abanico de sub-extensiones que el usuario puede instalar.
Esta herramienta de inspección de código a tiempo real reduce las suposiciones del diseñador a la hora de realizar las tareas de depuración mediante funcionalidades como inspección de código, pruebas de diseño de web o perfiles de rendimiento web, entre otros.
Esta guía se centra en los aspectos básicos de la herramienta así como en las funcionalidades base orientadas a un perfil de diseñador web que ofrece.
Primeros pasos con Firebug
Tras la descarga e instalación observarás un icono en la esquina superior derecha del navegador. Es Firebug durmiendo (el icono en blanco y negro es indicativo de que no se está ejecutando). Podemos ejecutar la extensión de tres formas diferentes:
Activación de Firebug
- Haciendo click sobre su icono.
- Presionando la tecla F12.
- Ejecutando la opción Inspeccionar elemento con firebug que en adelante saldrá en el navegador entre las opciones del botón derecho del ratón cuando lo presionemos.
El panel de Firebug
Una vez ejecutado, podemos colocar el panel de Firebug en dos posiciones diferentes:
- Anclado en la parte inferior de ventana del navegador, que es la posición con la que se ejecuta por defecto y que podemos seleccionar a través del primero de los botones de posición 1
- Como una ventana independiente, siendo esta la forma más cómoda de disponer de la extensión ya que nos permitirá aprovechar el campo de visión completo. El segundo de los botones de posición 2 lo ejecutará en esta ventana independiente.
Cerrar la ventana de Firebug no supone detener su ejecución. Como verás si lo cierras, el icono superior mantiene el color que indica que continúa activo. Si deseamos desactivar por completo Firebug haremos uso del tercero de los botones de estado 3.
Opciones de posición de Firebug
Inspeccionar elementos
Como diseñador, la pestaña HTML de Firebug (la segunda tras Consola) es la que utilizarás de forma más exhaustiva. Ejecutándola, Firebug nos muestra el código actual de la web, siendo una representación a tiempo real del mismo ya que podría ser diferente del código original o código fuente si, por ejemplo, hubiésemos cambiado contenidos a través de Javascript.
Podemos inspeccionar el código HTML y CSS de un elemento en particular posicionando el ratón sobre él, presionando el botón derecho y seleccionando Inspeccionar elemento con firebug (es la forma más cómoda) o ejecutando Firebug y navegar entre la estructura de árbol que muestra los contenedores hasta llegar al elemento deseado.
De igual forma, cuando tengamos el ratón sobre cualquier etiqueta de Firebug, este marcará en el navegador el elemento que corresponda (sin necesidad de hacer click sobre él), indicando su modelo de caja de forma cromática: azul contenido, morado padding, negro borde y amarillo margen:
Firebug marca una caja de encabezado con contenido, margin y padding
Podemos ver el estilo que está siendo aplicado a cualquier elemento haciendo click sobre su etiqueta. Firebug lo marcará en azul y nos mostrará en la columna derecha qué estilos están vigentes en ese momento para el item:
- La jerarquía superior en la que se encuentra inmerso el item, sobre la que puedes navegar haciendo click en cada nivel, está representada en la parte superior del panel 0.
- Si el item tiene estilos en línea (CSS contenido en su atributo style que sólo debe ser inyectado a través de Javascript) mostrará una primera regla con el selector element.style 1.
- Por cada regla de CSS que esté afectando al elemento Firebug nos mostrará la propia regla con sus propiedades y valores 2, así como la hoja externa de CSS que contiene esa regla y en qué línea se encuentra 3. Las reglas se muestran en orden de prevalencia descendiente respecto al elemento (la que tenga mayor prevalencia, primero).
- La reglas que afecten por herencia al elemento serán también mostradas, clasificadas según del elemento desde el que son heredadas 4.
- Si alguna propiedad no se está aplicando debido a que está siendo sobrescrita por otra con mayor prevalencia sobre el elemento, la mostrará igualmente pero de forma tachada 5.
Visualización de estilos a través de Firebug
Modelo de caja y tamaños a tiempo real
Firebug muestra el modelo de caja actual de cualquier elemento que esté seleccionado en su pestaña Plantilla del panel derecho. Esto resulta interesante cuando queremos conocer el tamaño absoluto que está adoptando un elemento relativo, además que al navegar sobre la representación del elemento veremos una regla en pantalla con base píxel y líneas divisorias en representación de los límites del item.
Plantilla visual de Firebug
Podemos editar esa medidas a tiempo real haciendo click sobre cualquiera de ellas (tanto su contenido como paddings, bordes o márgenes) e introduciendo la cantidad de píxeles que pasará a adoptar el elemento.
Edición de contenidos y estilos a tiempo real
Una de las funcionalidades más interesantes de los inspectores (y Firebug aporta una facilidad adicional para esto) es modificar a tiempo real los contenidos y estilos con el objeto de ver cómo quedan en pantalla y transferirlos de forma cómoda al código.
- Alteración de valores de una propiedad existente 1: haciendo click sobre cualquier valor de una propiedad que esté aplicándose a un elemento podemos cambiar su valor, o bien escribiéndolo, o bien sondeando entre sus diferentes posibilidades con los cursores inferior y superior.
- Desactivación de una propiedad existente: al pasar sobre cada una de las propiedades de una regla, veremos un icono de restricción rojo a su izquierda. Presionándolo haremos que la misma deje de tener efecto (esto es reversible).
- Creación de una nueva propiedad en una regla 2: haciendo doble click sobre una regla (fuera de cualquiera de sus propiedades) podremos redactar una nueva propiedad al final de esta con su correspondiente valor. Si queremos crear más propiedades, presionar la tecla Enter nos bajará a una nueva línea independiente.
- Creación de un atributo style en una etiqueta 3: haciendo click sobre la etiqueta de apertura de cualquier elemento, podremos crear un atributo style para este (de hecho, podemos crear cualquier atributo) y dotarlo de propiedades y valores.
Contenidos
Podemos modificar el HTML seleccionando el elemento en firebug y haciendo click en el botón superior “Editar” o, más sencillo, haciendo click directamente en cualquier contenido y redactando lo que deseemos ver en pantalla:
Edición de contenidos a tiempo real con Firebug
Esto es aplicable no sólo a los contenidos textuales sino a los valores de cualquier atributo (podemos cambiar el ID de un elemento o modificar sus clases), de igual forma que podemos suprimir elementos enteros del plano seleccionándolos y presionando la tecla suprimir.
Estilos
Existen varias formas de modificar estilos a tiempo real:
Edición de estilos a tiempo real con Firebug
Cambios de estilo y contenidos durante la navegación
Acciones como pasar por encima de un elemento de la página web que tenga alguna configuración de :hover (cambio de estilo que se produce cuando el ratón se encuentra sobre el elemento) o una dinamización de un elemento por parte de Javascript hacen que la página experimente un cambio de aspecto a tiempo real.
En el primer caso (modificación de estilos pero no de contenidos) Firebug mostrará en su sección de estilos las reglas o propiedades que sufren una modificación, mientras esta dure. En caso de modificación de contenidos, lo identifica dotando a los elementos del HTML que se ven afectados de un fondo amarillo e incluyendo en su atributo style los valores que están siendo aplicados a tiempo real.
Efecto de hover visto con Firebug
Conclusión
Si estás formándote en el diseño web y aún no tienes Firebug, estás tardando en empezar. Conócelo, experimenta con él y descubre todos los entresijos que tiene. Este simpático bicho te acompañará durante tantos años como dure la carrera profesional y te ahorrará innumerables horas de ensayo/error y quebraderos de cabeza.
Y si algún día tienes un affair con Chrome Inspector, ahí seguirá esperándote. Sin rencores.