Jonathan Echeverría
Lo que tengo en la cabeza

Firebug, el arte de hacer webs (Parte 1)

Firebug es otro fantástico plugin de firefox casi indispensable cuando se conoce en profundidad. Este plugin está dirigido principalmente a los desarrolladores web y, en menor medida, a los diseñadores web (que no son lo mismo, ver diferencia).

Es una herramienta de desarrollo web con la que podemos editar, debugear javascript o html así como modificar los estilos de una página. Además nos ayudará a analizar el peso que tiene nuestro HTML (monitorizar todas las peticiones que se hagan al servidor: imágenes, librerías javascript, etc) por lo que podremos siempre optimizar el rendimiento del mismo de forma que consigamos una velocidad de carga óptima. La rapidez en la carga de una página, que es consecuencia directamente de la velocidad de respuesta del servidor donde está alojada la misma, es una característica que se debe perseguir siempre en el desarrollo web, es una meta que hay que alcanzar para que nuestro sitio web sea ágil y dinámico y no sea causa de un desinterés por parte de nuestros visitantes.

Cuando reinicias tu firefox después de habértelo instalado aparece un ‘bichillo’ (insecto que es parecido a una cucaracha) en la esquina inferior derecha de nuestro navegador, consecuencia de que podemos empezar a trabajar con él. Haciendo click en ese insecto o presionando la tecla F12 aparecerá el espacio de trabajo del nuestro recién llegado.

En esta primera parte del post voy a describir las características del plugin, lo que nos permite hacer este a la web que se está mostrando en ese momento en el navegador mozilla.

* Inspeccionar y editar el HTML. Hace muy sencillo el análisis y la edición del texto HTML. Podremos modificar el HTML al vuelo y ver los resultados directamente en el navegador. Si cambiamos dese firebug la etiqueta title de nuestra página veremos que inmediatamente después a aceptar los cambios el título ha cambiado.
* Controlar todas las hojas de estilo: hay una pestaña dentro del espacio de trabajo que nos muestra todos los estilos que están involucrados en el diseño de nuestra web.Esta característica actúa de la misma forma que la anterior cualquier cambio que hagamos de los estilos se verán instantáneamente. Podremos modificar cualquier valor de cualquier estilo, y, además, añadir más etiquetas.
* Resalta las partes de la web que nosotros queramos: firebug nos puede resaltar con distintos colores por ejemplo divs, botones, cajas de texto. Esto nos puede venir bien para posicionar elementos dentro de la página.
* Monitorizar la carga. La carga de una página implica pedir al servidor determinados recursos tales como imágenes, ficheros de código javascript, peticiones de funciones de servidor (php, python, ajax). Todas estas peticiones son mostradas y captadas por este plugin, aportando, además, por cada petición, información muy valiosa como por ejemplo, el tiempo de respuesta del servidor para un recurso determinado. Todo esto enfocado siempre a la velocidad de carga, ya que podremos ver qué parte (imagen, librería javascript, etc) de nuestro sitio es la que más pesa y por tanto la que más ancho de banda consume, siendo ahí donde deberemos esforzarnos en reducirlo. Véase la siguiente imagen:

* Debug de javascript: posee un debugger indispensable para nuestra programación javascript. Actúa como cualquier otro debugger: podremos colocar puntos de interrupción donde queramos e ir instrucción por instrucción analizando el valor de nuestras variables.
* Errores en la carga de la página: existe una página ‘consola’ que nos informa de todos los posibles errores que han podido surgir en la carga de una página, generalmente errores en la programación. En esta misma consola podremos ejecutar instrucciones javascript.

De momento eso es todo, seguramente que me deje muchas cosas en el tintero, pero lo que he expuesto es lo más básico de este gran plugin. Personalmente creo que es una herramienta muy útil para el desarrollo

Cuando tenga un poco más de tiempo explicaré cada una de las características un poco más en profundidad. Asimismo, en próximas publicaciones hablaré de otro plugin que trabaja directamente con este llamado YSlow, incidiendo un poco más en la velocidad de carga de una página.

Artículos relacionados:

• 21 de febrero, 2009 -- Firebug, el arte de hacer webs (Parte 2)
• 4 de noviembre, 2009 -- 2 monitores en el mismo equipo (escritorio extendido – “Twin View”) con xrandr
• 3 de julio, 2009 -- Trabajar con doble monitor

Tags: ayuda crear webs, ayuda desarrollo web, depurador web firebug, firebug, plugin firefox desarrollo web

2 comentarios en Firebug, el arte de hacer webs (Parte 1)

1. 

   Hola! ando un poco perdido en estos temas y no se.. a ver si me podeis ayudar.
   Estaba buscando un sitio para crear mi propia web sobre mi pyme y encontre este sitio de desarrollo web… a ver web ya tengo pero es una que cree yo mismo y os podeis imaginar como quedo jajjaja asi que busco algo profesional y si puede ser por aqui por bilbao pues mejor, y parece que por aqui son de lo mejor. A ver que os parece a ver si me dais vuestra opinion
   Gacias y un saludo!
crapers escribió el 17 febrero, 2009
2. 

   Hola Crapers,

   Como has podido ver estoy metido en el mundo web porque trabajo en Acysos, una empresa en la que nos dedicamos en parte a hacer páginas web con exponentcms. Trabajamos conjuntamente con una empresa de Bilbao llamada Abartia Team y con los que puedes contactar (por cercanía, ya que nosotros estamos en pamplona) que seguro que te asesorarán muy bien y harán un trabajo fabuloso.

   Un saludo
Jonathan Echeverria escribió el 17 febrero, 2009

Deja un comentario