I love Firebug
Hace tiempo que lo llevo utilizando y todavía no entiendo cómo era capaz de maquetar un sitio web sin él. Se trata de una extensión de Firefox llamada Firebug.
Consiste en un software que se integra al navegador para añadir herramientas de desarrollo web al alcance de los usuarios que en este caso seríamos los desarrolladores.
Mientras se navega por cualquier sitio web podemos visualizar la estructura, modificar el css o controlar los tiempos de carga de las imágenes utilizadas, eso sin tener en cuenta que se trata de un complemento muy fuerte para la creación de sitios web.
Firebug es maravilloso, te permite ver en tiempo de ejecución todos esos detalles de programación o diseño que para pulir conlleva muchos más clicks o quebraderos de cabeza de los que uno quisiera.
Antes de conocer Firebug me tenía que conformar con el visor de elementos incluido en el “Web Developer”. Para controlar las herencias y ver qué propiedades tenían los elementos iba bastante bien, pero los desarrolladores web necesitábamos algo más.
Con Firebug montar HTML + CSS se convierte en un visto y no visto, podemos buscar los errores de nuestro sitio, editarlos en tiempo real desde la misma página, podemos modificar los tamaños de los distintos elementos. Donde antes teníamos que marcar los elementos con bordes de colores, ahora con un solo click lo tenemos controlado.
Firebug te dice todo sobre tus css: cómo pinta un elemento, si hereda alguna propiedad, te muestra en pantalla el ancho y alto, los márgenes que posee o el padding todo ello aplicado con un pequeño gráfico.
También puedes controlar los tiempos de carga de las imágenes, y por si fuera poco te permite revisar el javascript para ver si tiene algún error el código que estamos editando.
Firebug te ofrece:
Ver y editar el código HTML.
Nos permite ver el código fuente y encontrar elementos HTML en el código posicionándonos en ellos con el ratón, podremos editarlo mientras vemos como quedan las modificaciones. De esta manera no hace falta que recarguemos la página para ver los cambios realizados.
Visualizar y editar CSS.
Es la herramienta que más utilizo, con ella podremos editar los estilos en tiempo real sin tener que acudir al fichero css. Posee autocompletado de las propiedades y visualización del tamaño de los elementos mostrado en un gráfico que te señala el margin o padding que pueda tener.
Controlar el tiempo de carga.
Con esta opción podemos medir el tiempo de carga de cada uno de los ficheros que componen la página. Esta extensión nos muestra cada petición realizada al sitio y los segundos que tarda en obtenerla.
Debuguear el javascript.
Es uno de los puntos más fuertes del Firebug. Podemos buscar los scripts fácilmente y poner puntos de interrupción en nuestro código cuando se cumpla una condición, además nos permite controlar el tiempo de ejecución de nuestros scripts entre otras cosas.
Múltiples opciones nos esperan al instalar esta herramienta. Puedes ver más detalles de este complemento en la página oficial www.getfirebug.com
Estoy totalmente de acuerdo, señor “border:1px solid #0f0″ (quién coño lo pone verde?) JJJ!!
Te ha faltado indicar que tiene consola, y con las función console.log() puedes pasarle mensajes a esa consola, y así no tener que usar chivatos alert ni nada por el estilo (además de enviar mensajes, se pueden generar warnings y errors, pero eso lo dejo como ejercicio
)
Para añadir otra herramienta al saco: No has deseado nunca tener una herramienta como firebug para IE?
Pues tus deseos son órdenes (casi): Para IE7 tienes el Internet Explorer Developer Toolbar:
http://www.microsoft.com/downloads/details.aspx?FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Ale, a jugar con el nuevo juguete!
Besitos!
Me has chafado parte de un artículo.
Quería poner similitudes entre el IE7 y otros navegadores y como no, el Firebug y el Developer Toolbar para explorer se parecen enormemente, eso sin contar que una herramienta nos ayuda mientras que la otra nos facilita el diseño, nos agiliza el tiempo de trabajo, nos resuelve problemas, nos alivia dolores de cabeza y podría seguir así hasta llegar a aburrirme.
Por cierto, te has dado cuenta que IE7 y Safari renderizan las fuentes de la misma manera?
Ahiii buenisimo este post.. me ha salvado de partirme la cabeza buscando un error tan tonto pero que no lograba como sacarmelo de encima.. no conocia estas herramientas pero creo que las amare de ahora en adelante..
gracias por el dato.
Slaudos
Para eso estamos Calila.
Gracias por pasarte y comentar. Espero poder sacar algo de tiempo e ir actualizando y posteando más a menudo.
Un saludo!
Por cierto, se han fijado tambien, que safari rescala las imagenes sin pixelarlas (algunos webmasters flojos hacen thumbs sin hacerlos realmente, ocupando la imagen grande)
La verdad sea dicha. Safari es un mundo aparte.
Esta semana publicaré un artículo sobre Safari 3 y según Apple es el navegador más rápido de los conocidos. Tarda mucho menos en cargar el html, javascript o incluso el arranque de algunas aplicaciones. Por lo que he visto en la estadística llega a ser más veloz que Opera, IE7 o incluso Firefox 2.