Jonathan Echeverría
Lo que tengo en la cabeza

Firebug, el arte de hacer webs (Parte 2)

Hola de nuevo. Vamos a explicar en esta última parte algunos usos prácticos de este gran plugin. Voy a hablar de cómo lo uso yo personalmente, con el fin de que el lector pueda adquirir una idea básica de uso.

Debemos fijarnos siempre, y tener en cuenta, que nuestra meta, como ya repetí en el artículo anterior, es que debemos conseguir un tiempo de carga mínimo. Esto no significa que debamos cambiar nada de nuestra capa de presentación de la página. Hace referencia a la carga de las imágenes, a la carga de nuestras librerías javascript, al número de llamadas AJAX, a nuestros SWFs.

Yo, personalmente y a la hora de hacer webs, hago bastante uso de AJAX (Asynchronous JavaScript And XML, http://es.wikipedia.org/wiki/AJAX). Esto abre un abanico de posibilidades increíble para ahorrar ancho de banda, hacer menos largas las esperas de nuestros visitantes, y dar un dinamismo a la página que hace unos pocos años esto era impensable. Y la pregunta que nos podremos hacer en este punto puede ser… ¿por qué estamos ahora hablando de AJAX? Precisamente porque firebug nos ayuda a ‘depurar’ nuestras llamadas asíncronas al servidor. La pestaña de consola nos muestra todas las llamadas que se hacen asincrónicamente desde que se carga la página. Además no sólo eso sino que va un poco más alla: muestra todos los parámetros usados (de GET o POST) para la llamada y la respuesta del servidor a la misma.

En esta misma consola podremos ejecutar funciones javascript que estén ‘presentes’ en la página que se está cargando en ese momento de la ejecución. Esto nos lleva a un control total del comportamiento de nuestras funciones, ya que podremos usar esta característica para depurar y optimizar dicho comportamiento para que sea el deseado por el programador.

La pestaña HTML nos muestra el lenguaje de marcas que está interpretando el navegador. Además no solo lo muestra como si fuera texto plano, sino que nos resalta en la página las partes en las cuales coloquemos el cursor del ratón encima. Por ejemplo si colocamos el cursor encima de:

<input type="submit" value="Buscar con Google" name="btnG"/>

La página nos aparecerá de la siguiente forma:

Además firebug dispone de un botón inspeccionar para ir con el ratón por los diferentes objetos de la página y él te resalta el códgio HTML al que hace referencia. Todo esto nos viene genial para posicionamiento de los objetos dentro del espacio web del navegador firefox. Además podremos modificar como queremos dicho código, viendo su resultado inmediatamente. Podemos cambiar, por ejemplo, in situ el estilo de un label, o de un botón.

Otra pestaña interesante es la que nos resume todas las hojas de estilo que están involucradas en la decoración de la página que actualmente se está viendo. Podemos, como en el caso anterior, modificar in situ cualquier estilo viendo su resultado inmediatamente. Por ejemplo podemos cambiar la propiedad color de texto de negro (#000000) a blanco (#FFFFFF) para ver qué color de letra nos gusta más. Esto evita que tengamos que salir del navegador, ir a nuestro programa de edición web cambiar el color y actualizar nuestra página en el navegador. Además podremos añadir propiedades de estilo nuevas.

La pestaña Script (o Guión si es la versión castellano) sirve para controlar nuestros scripts de cliente. Podremos añadir puntos de ruptura en una instrucción, ver el contenido de nuestras variables y comprobar, en el fondo, si hace lo que nosotros habíamos diseñado. Veremos además que existen teclas de función para ir instrucción por instrucción recorriendo todo el flujo de ejecución o simplemente recorriendo las instrucciones de una función sin meterse en las que métodos hijos de esta última. Esta pestaña es de solo lectura.

Existe una parte de este plugin que es llamado DOM (Document Object Model, quién no sepa lo que es que se de una vuelta por Wikipedia). En el podemos ver todos los elementos existentes en la página, con sus propiedades. Esto nos puede servir (es el mayor uso que le hago) para localizar determinado objeto por medio de javascript y modificar sus propiedades. Por ejemplo, trabajar con anchos de objeto para posicionar otros de forma que no se superponga ninguno. Esto lo podemos hacer con el DOM y esta herramienta del plugin.

Por último existe el network, o red en castellano, que nos muestra todos los ficheros externos a nuestro HTML que se usan para darle funcionalidad y acabado a la página, como son swf, jpgs, javascripts, llamadas Ajax, etc. Se muestra el tiempo de carga de cada elemento y su tamaño. Esta información es vital para esforzarnos en mejorar el tiempo de carga reduciéndolo al mínimo (reduciendo imágenes o swf, comprimiendo cabeceras HTML, minimizando el código javascript, etc.

Esto es todo. Me he dejado detalles pero son poco importantes creo. De todas formas si teneis alguna duda poned algún comentario a este artículo y yo responderé con gusto. Ah! Se me olvidaba, un plugin de este plugin llamado YSlow de yahoo es muy útil también para reducir el tiempo de carga de una web ya que te dice en qué elementos podremos reducir el peso de la web.

Artículos relacionados:

• 16 de febrero, 2009 -- Firebug, el arte de hacer webs (Parte 1)
• 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 2)

1. 

   Que bueno!!! no? Este artículo me suena!!! Jeje
Daniel escribió el 21 febrero, 2009
2. 

   Hola como andas, me encanto el articulo yo tambien desarrollo con ajax, me gustaria estar con contacto ya que aveces este trabajo requiere de otras personas para compartir recursos y tips q facilitan el laburo
   si queres agregame a msn: ezeyeye@hotmail.com
   SAludos!!!
Ezequiel escribió el 15 agosto, 2009

Deja un comentario