Firebug: el complemento imprescindible para webmasters

Firebug Logo

 

Firebug LogoIncontables veces miramos nuestra web y vemos una imagen fuera de lugar, un texto sin el tamaño adecuado, un borde descuadrado o, simplemente, no sabemos dónde modificar un parámetro concreto (como el color del texto de una zona concreta).

Siempre me han preguntado cómo soy capaz de adivinar qué hay que cambiar y a donde ir para hacerlo. Nada de magia, nada de trucos. Bueno, tal vez si sea un truco, pero no es más que el conocido Firebug.

Firebug es un complemento para el explorador Firefox que tiene sus primos hermanos en otros exploradores como Chrome. Sin embargo, en este artículo me centraré en él y os lo mostraré breve y gráficamente.

 

¿ Para qué sirve Firebug ?


Firebug nos permite ver y detectar el código HTML, CSS e incluso Javascript de nuestra web y modificarlo a tiempo real. Para aquellos no duchos en estos términos, nos permite ver, en una sola interfaz, todos los archivos (y sus consecuentes parámetros) que dan forma al contenido de la página actual en la que estamos.

Supongamos, por ejemplo, que no me gusta el color, el tamaño o la fuente del “Pagina web personal y blog” que veis arriba.

Extiendo Firebug y la herramienta para seleccionar elementos.

Herramienta Firebug

Después hacemos clic en el elemento, en este caso “Pagina web personal y blog”

Herramienta Firebug

 

Como podéis ver, al seleccionar el elemento nos indica la línea final del HTML. También los parámetros CSS o de estilo, que son los que determinan el estilo, en este caso, del texto. Así, sabemos que la fuente es una Georgia, y el color un#864a4a, incluso el tamaño o si está en cursiva.

Si queremos modificarlo, tan sólo tenemos que ir a nuestro gestor de archivos de servidor y modificar el archivo en la línea que nos indica.

Pero, sin embargo, lo mejor de Firebug es que, si antes de modificarlo, quieres ver cómo queda, solo tienes que hacer doble clic para cambiar el parámetro.

Podemos añadir nuevas líneas de código, o modificar las existentes, todo ello, sin realizar ningún cambio real, y sin salir de nuestro explorador. (Ojo, no refresquéis la página o perderéis los cambios. Y, si queréis otro consejo, no hagáis muchos a la vez o, la hora de hacerlo reales, no recordaréis cuales son.)

Otra de las ventajas que tiene es que pueden integrarse servicios como el YSlow, que nos permitirá medir en cuanto tiempo se carga nuestra página y qué cosas debemos de hacer para mejorarlo, según las preferencias de los exploradores.

 

Fácil y útil ¿eh? Echadle un vistazo, lo mejor de ello, es que es gratis.

¡Dejar un comentario también es gratis! 😀

 

8 Comments

  1. no tenia ni idea de esta extensión, gracias por explicarlo, aunque la edicion en html no es mi fuerte para nada, de hecho soy un poco negada, pero ahora mismo me pongo a probarlo.

    Reply
    • Bueno, aunque no sea tu fuerte siempre es útil tenerlo a mano para saber, por ejemplo, la dirección de cierto elemento en una web, o el tipo de fuente, o el color (si quieres reproducirlo)!

      Échale una ojeada, yo ahora no puedo vivir sin él.

      Muchas gracias por comentar 😀

      Reply
  2. Intento editar con el notepad++ pero muchas veces no encuentro el archivo o la linea a la que se refiere el firebug. ¿Cómo se edita?

    Reply
    • Buenas German,

      Lo ideal en estos casos es que hagas uso del editor de código que viene integrado en el administrador de archivos de tu servicio de hosting web (al menos si hace uso de cPanel).

      Si no, puede descargarte algún programa especial para leer archivos html o php en el que te resalte el código y te marque las líneas.

      Yo, personalmente, para mac, utilizo Smultron. Aunque suelo editarlos en el servidor si es sólo una línea.

      Un saludo,

      Daniel

      Reply
  3. Al parecer Firebug es otro de los sistemas que solo endulzan al diseñador Web.
    Existen varios software que nos permiten modificar online la página web, no son tan versátiles como Firebug en sus muestreos, pero debemos de recordar que los editores de códigos web no todos se manejan igual, por tanto el resultado es diferente.
    Por lo que parece Firebug no escapa en el no consolidar con lo que muestra en pantalla, es solo eso un lindo espejito de bronce incapaz de terminar el proceso para el cual estaba orientado inicialmente, no lo terminaron los chingados sistemistas y lo lanzaron así nomas “se quedaros con la primera base”, el mostrar lo lindo que parece, al final el diseñador Web terminara usando su típico editor web para terminar el trabajo, jajajajaja.
    Los diseñadores Web buscamos y buscamos por donde se graban las modificaciones hechas, pero al final terminamos por entender que es solo eso… existen tanto el Stylizer, XMLBlueprint, Style Master y otros que si cumplen con el proceso hasta el final, no son de las pantallitas lindas como Firebug pero esperamos que superen este escoyo lo antes posible, al final Firebug terminara cobrando una guasada por el sistemita que no cumple con el proceso, por ahora puro lanzamiento y nada de resultado requerido.
    El día que Firebug me muestre el botoncito de “Guardar” o que me pregunte por los FTP (servidor, usuario y clave), estaremos conformes, por ahora pura chingadera bien adornada con el poderío del marketing del crucero imperial galáctico jajajaja.

    Reply
  4. Al parecer Firebug es otro de los sistemas que solo endulzan al diseñador Web.
    Existen varios software que nos permiten modificar online la página web, no son tan versátiles como Firebug en sus muestreos, pero debemos de recordar que los editores de códigos web no todos se manejan igual, por tanto el resultado es diferente.
    Por lo que parece Firebug no escapa en el no consolidar con lo que muestra en pantalla, es solo eso un lindo espejito de bronce incapaz de terminar el proceso para el cual estaba orientado inicialmente, no lo terminaron los chingados sistemistas y lo lanzaron así nomas “se quedaros con la primera base”, el mostrar lo lindo que parece, al final el diseñador Web terminara usando su típico editor web para terminar el trabajo, jajajajaja.
    Los diseñadores Web buscamos y buscamos por donde se graban las modificaciones hechas, pero al final terminamos por entender que es solo eso… existen tanto el Stylizer, XMLBlueprint, Style Master y otros que si cumplen con el proceso hasta el final, no son de las pantallitas lindas como Firebug pero esperamos que superen este escoyo lo antes posible, al final Firebug terminara cobrando una guasada por el sistemita que no cumple con el proceso, por ahora puro lanzamiento y nada de resultado requerido.
    El día que Firebug me muestre el botoncito de “Guardar” o que me pregunte por los FTP (servidor, usuario y clave), estaremos conformes, por ahora pura chingadera bien adornada con el poderío del marketing del crucero imperial galáctico jajajaja.

    Reply
  5. ¡Totalmente de acuerdo! Muchas veces realizas los cambios (siempre con sus limitaciones), terminas y piensas ¡Así perfecto! Luego te percatas de que, en realidad, no has "cambiado nada" y que que ahora tiene que ir a abrir 20 archivos diferentes para hacer efectivos los cambios…

    Sin embargo es una herramienta muy interesante a nivel visual, y a un nivel básico, si tener que tener mayores conocimientos 😀

    ¡Muchas gracias por pasarte y dejar tu comentar!

    ¡Un saludo!

    Reply

Deja un comentario