Magazine

Firebug: el complemento imprescindible para webmasters

Publicado el 13 junio 2011 por Dexposito @DA

 

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! :D

 


También podría interesarte :

Volver a la Portada de Logo Paperblog

Quizás te interesen los siguientes artículos :