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.

Pantalla de Firebug

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:

Pantalla de carga de Firebug

* 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.

2 Comments

  1. crapers 17 de febrero, 2009
  2. Jonathan Echeverria 17 de febrero, 2009

Leave a Reply