Firebug es una conocida extensión para Firefox que no deberías dejar de tener instalada. Ya sea que te orientes de manera profesional al diseño de webs o como aficionado, la gran potencia de esta herramienta te hará hacerla inseparable de tu navegador, pues te permite editar, depurar (debuggear para los puristas) y monitorear el código HTML, CSS y hasta Javascript de páginas webs en tiempo real.

Desde que probé esta herramienta no he dejado de usarla para hacer cualquier cambio en mi blog. El diseño, los colores, los tamaños, los márgenes, los elementos HTML, los tipos de letra, fondos, etc. Todo es editable usando esta extensión que, en su versión 1.5.0, es compatible con Firefox desde su versión 3.5 (y la actual 3.6).

Los elementos HTML tienen un color definido con efectos mouse-hover, lo que te permite saber cuándo estamos editando el elemento correcto. Además las etiquetas HTML son expandibles y las características de los elementos CSS tienen activada la opción de autocompletar.

Firebug se abre en una sección de pantalla inferior al presionar la tecla F12 o desde el menú de Firefox en Herramientas/Firebug/Abrir Firebug. Si eso te parece incómodo puedes abrir el editor en otra pestaña o en una ventana flotante. Otra manera de editar elementos HTML y CSS directamente es seleccionando el elemento que querramos editar y hacienco clic derecho, para luego seleccionar la opción del menú contextual: Inspeccionar Elemento.

Editar HTML con Firebug

Mejor revisemos un ejemplo sencillo. Supongamos que quiero cambiarle el color y el tamaño a los títulos de las entradas de mi blog, pero no estoy seguro de qué mover, así que prefiero primero probar con el Firebug.

Primero seleccionamos el elemento y abrimos el menú contextual de Firebug con el clic derecho.

Veremos que en la parte inferior nos aparece un panel con dos secciones.

La primera sección es el código HTML de la página:

Aquí podemos ver que tenemos, entre otras cosas, un menú de edición compuesto por la consola, el editor html (por defecto), el editor de CSS, etc.

Otra cosa destacable es la ruta del elemento, que nos informa dentro de qué jerarquía de etiquetas HTML nos encontramos. Si colocamos el cursor sobre estos elementos veremos que en la página se irán sombreando las secciones para que las podamos visualizar en tiempo real.

La segunda sección es el panel de características tomadas de las hojas de estilo (CSS):

Aquí tenemos los elementos CSS tomadas de las hojas referenciadas del código HTML. Podemos ver que no solo hay un elemento para un estilo, sino que en muchos casos puede haber un estilo padre del cual hereda algunas otras características.

En este ejemplo vemos que los encabezados h2 y h3 ubicados dentro de la clase title, dentro de la clase post, tienen tamaño de letra 16px y color #00589E. Sin embargo este elemento de color aparece tachado porque existe otro elemento de un nivel superior (para los enlaces h2 y h3 dentro de las mismas clases) que define un color #00589E.

Para editar los elementos solo hay que hacer clic sobre cualquiera de ellos. Para añadir uno nuevo debemos hacer doble clic sobre el elemento CSS comprendido entre llaves. Para deshabilitar características CSS de un elemento solo poner el cursor sobre éste y aparecerá un signo de bloqueo que deben activar haciendo clic, luego de lo cual se tornará rojo (ver ejemplo en la imagen inferior).

El cambio que haré al título de los posts será ponerlos en tamaño de letra 22px y color rojo (hexadecimal: #FF33333). Lo cual se puede ver en la siguiente imagen. Bastante elemental.

Evidentemente ustedes no verán los cambios porque solo se ve en la PC local. Si quieren restaurar los valores iniciales basta con actualizar la página en el navegador con F5.

La instalación de la extensión la puedes realizar desde la misma página oficial de Firefox Addons.

Enlace: Get Firebug

Etiquetas: , , ,

Comentarios ( 7 ) en: Firebug: Extensión Firefox para diseñadores web
  • urifuentes dijo:

    Síganme tomando en cuenta. Exito.

  • Lizzette dijo:

    Yo lo uso, es muy bueno y super útil, asi como la otra extension de Firefox llamada FireFlash.

  • Felix dijo:

    Gracias!! Lo tomaré en cuenta y comenzaré a trabajar con él a ver qué tal me va.

  • Jhovanna dijo:

    Me encanto esta funcion de firefox con la extension. No lo conocia y me viene de perlas ahorita que ando inscrita en un curso de HTML. Gracias 😀

  • esteban dijo:

    Encuentro que es una herramienta completamente inutil. Por mas que modifique algo en una web tales cambios no son guardados, no hay forma de hacerlo y por mas que quiera encontrar la ruta del archivo que modifique para modificarlo de forma “Real” no hay modo de hacerlo ya que firebug no la muestra. A mi gusto es una herramient excelente para perder el tiempo y darte dolores de cabeza.
    Espero estar equivocado y que alguien enseñe realmente a utilizar este programa de forma eficiente y no para perder el tiempo… si es que se puede.

  • Kristian dijo:

    Es verdad lo q dice esteban hasta ahora no encuentro de modificar realmente lo quiero cambiar ya q esta herramienta solo lo hace local y no me da la ruta exacta del html para poderlo modificar es buena pero no sirve en realidad

  • Angel dijo:

    Hola, ya he buscado mucho y no he encontrado nada, ni en el inspector de codigo del navegador(uso firefox 17)
    ni en firebug ni en web developer tool bar, y la verdad se me hace un error muy grande de los desarrolladores de firebig que se les haya pasado esta SUPER util pero sencilla funcion: NO TE DICE LA RUTA DEL ARCHIVO, te dice la ruta del elemento dentro del archivo, pero por ningun lado puedes tu saber que archivo es o en donde esta para hacer los cambios fisicos reales que deseas.
    O tal vez firebug SI trae esta funcion y no la he encontrado (lo cual dudo mucho) asi que si alguien sabe agradecere su ayuda