Firebug

Firebug es una extensión (add-on) para Mozilla FireFox que permite interactuar en tiempo real con el HTML, CSS, Java Script, XHR, y las imágenes de la página mostrada.

Nota: Existe una extensión más limitada (javascript debugger) para Internet Explorer, Nikhilk Web Dev Helper.

Acerca de Firebug

Firebug fue creado por Joe Hewitt, creador de Firefox y ex Netscape.

Descarga del Software

Para comenzar las pruebas, se descarga el software desde la página http://www.getfirebug.com  y se instala. El único requisito es tener Firefox instalado con el Dom Explorer, si no lo tenemos se puede instalar desde http://getfirefox.com.

Eliminación de la caché del navegador

Para realizar las pruebas, simularemos que es la primera vez que accedemos al sitio web o a la aplicación que vamos a probar. Para ello, eliminaremos la caché del navegador.

La caché del navegador en FireFox se elimina en el menú Herramientas del navegador, Limpiar Información Privada, marcando Caché y pulsando Aceptar.

Ejecución de las pruebas

Para activar Firebug se pulsa el incono  que aparece en la barra de estado de FireFox (Ver -> Barra de estado).

En Firebug no es necesario cambiar la información del proxy pues se integra completamente con el navegador.

El entorno de trabajo

Firebug dispone de un entorno integrado para el análisis de aplicaciones web. En Tecsisa lo utilizamos como herramienta de debug de javascript, css, html, AJAX y para el análisis rápido y visual del rendimiento de las aplicaciones web.

En este artículo me centraré en la utilización de Firebug para el análisis del rendimiento de aplicación web.

Realicemos la primera prueba visitando la web de Google. http://www.google.com/webhp

 

 

 

 

Para ver las peticiones se selecciona All y Net.

De esta forma indicamos a Firebug que queremos ver cualquier tipo de petición (All) y analizar las peticiones a la red (Net).

Firebug muestra un listado en orden de descarga de los distintos elementos que componen la página web, el host de origen, el peso y, mediante una barra de tiempo, el incio de la descarga y el tiempo transcurrido.

Analizando páginas web que tienen muchos recursos aparece de forma gráfica la justificación a la recomendación "Agrupar en la medida de lo posible el código javascript en un solo fichero" pues la interpretación del estándar RFC2616 por parte de Internet Explorer impide que el  navegador abra más de dos conexiones persistentes al mismo servidor. En el caso de Firefox son ocho conexiones simultáneas y por tanto se descargan los distintos ficheros que componene la página en grupos de ocho.

Nota: estos valores pueden ser modificados, pero el usuario estándar no suele realizar este tipo de cambios. Así mismo los usuarios que navegan a través de un proxy estarán limitados por la configuración del proxy.

Utilizamos esta información para identificar los ficheros que suponen un cuello de botella. Los contenidos estáticos como las imágenes no requieren funcionalidades avanzadas por parte del servidor de aplicaciones, y por tanto, son candidatos a ser distribuidos desde servidores web de alto rendimiento. 

Los servidores de alto rendimiento suelen estar limitados en sus funcionalidades por construcción (por ejemplo http://www.mathopd.org/) o por su configuración, como sería el caso de un Apache configurado para cargar un número muy limitado de módulos.

Expandiendo cada una de las solicitudes se observan las cabeceras de solicitud y de respuesta.

Pasando el ratón por encima de la url de cada solicitud o de la barra de tiempo aparece una miniatura de los recursos gráficos. Si el recurso no existe en el servidor se indica poniendo el texto en rojo.

Es muy importante identificar y corregir los errores del tipo 404 Not Found por los siguientes motivos de rendimiento:

• Normalemente la respuesta es no cacheable, lo que obliga a pedir de nuevo el recurso en cada visita y probablemente el resultado será el mismo código de error.
• Si se ha personalizado la página de error para dar información descriptiva, el servidor envía al cliente el código de error 404 y además una página que explica el error, presenta un mapa de contenidos, un buscador y otra información que ayude al usuario. El cliente está recibiendo como respuesta a cada solicitud, que no existe gran cantidad de contenido no cacheable y que sólo se se visualizará en el navegador (consiguiendo su objetivo) si la petición era para un recurso HTML.