Firebug en Firefox

Firebug una extensión del navegador Firefox que nos permite editar webs y hojas de estilo, monitorizar tiempos de carga, depurar javascript y ver los errores en la página además de explorar el DOM.

DOM es el acrónimo de “Modelo en Objetos para la representación de Documentos”, aunque ésta es una mala traducción. El DOM es el árbol jerárquico para la página web y su representación gráfica se asemeja a un organigrama. Con el DOM los programadores pueden trabajar de manera dinámica con la página (a esta tecnología la llamamos DHTML).

Actualmente existen algunas extensiones para Firefox que trabajan conjuntamente con Firebug como es el caso de FireUnit un plugin que nos da la posibilidad de realizar pruebas unitarias de Javascript y mostrará los logs en una pestaña de Firebug.

Instalación

• Lo primero que tenemos que hacer si no lo tenemos instalado es descargar e instalar el navegador
• Mozilla Firefox desde su página oficial. http://www.mozilla-europe.org/es/firefox/
• Y luego añadir los complementos necesarios Firebug, lo puedes encontrar aquí: https://addons.mozilla.org/es-ES/firefox/addon/firebug/
• Y el FireUnit http://fireunit.org/

Cómo trabajar con Firebug
 
Una vez lo tengamos instalado sólo tenemos que pulsar sobre el icono de Firebug que aparece desactivado en la parte inferior derecha del navegador. El icono es una imagen de una especie de escarabajo. Si tenemos algún problema para encontrarlo también podemos dar con el botón secundario del ratón sobre cualquier parte de la página web y al hacer click con botón derecho, elegir la opción “Inspeccionar elemento”. En la parte inferior de la pantalla aparecerá una ventana (el Firebug), dándonos información sobre el elemento de la página web que elijamos o en el que estemos posicionados. En concreto nos aparecerá el código del elemento inspeccionado: las instrucciones que recibe el ordenador para que algo se muestre de una determinada manera.

Pulsando sobre el icono de inspeccionar (icono con una flecha azul) podemos ir recorriendo las distintas partes que forman la página y viendo el código asociado: a través del código podemos identificar colores, tamaños de letra, jerarquías de un elemento dentro de la página, descripción y ruta de una imagen, etc. Por ejemplo si pinchamos sobre una imagen podemos ver como código:

<img alt="imagen.jpg" height="180" src="/images/imagen.jpg" width="225" />

lo cual nos está informando del tamaño en pixeles, la descripción de la imagen, el nombre del fichero, etc. Una vez desplegado el Firebug vemos que posee una barra de herramientas principal donde algunos elementos aparecerán desactivados. Para activarlos sólo tenemos que pulsarlos y darles a activar (habilitar o deshabilitar).

Algunas Pestañas Interesantes:

La pestaña HTML
 
En la sección HTML se muestra, de manera cómoda, el código HTML de la página que en este momento se está viendo en Firefox. Los signos + y - ayudan a revisar cada una de las secciones del código.
Con el botón Inspect podemos seleccionar una parte de la página, la que se seleccionará a su vez en el código HTML.

Utilizando el botón Edit podemos modificar la parte de la página actualmente seleccionada para ver cómo ser vería si modificamos el código. Esto es muy utilizado por los diseñadores web para probar otras imágenes o palabras.

La pestaña Net
 
En la pestaña Net se muestra cada solicitud y respuesta que se produjeron para cargar la página que actualmente está mostrando Firefox. Para hacer análisis de tráfico, esto es una ayuda con respecto a Wireshark, pues en este caso estamos filtrando sólo lo que nos interesa. Para poder realizar el análisis de tráfico es necesario presionar el botón de activación que se muestra en esta pestaña. En la primera columna se indica el método o verbo que se utilizó (GET o POST, usualmente) y parte de la URL que corresponde a esa solicitud. En la segunda columna aparece el código correspondiente a la respuesta de esa solicitud. Luego, en la tercera columna, aparece el dominio que respondió a la solicitud. En la cuarta columna aparece el tamaño de la respuesta (medido en bytes, kilobytes o megabytes, según sea conveniente). Finalmente, en la quinta columna aparecen los tiempos de respuesta de cada solicitud. Al abrir, con el signo +, una de las solicitudes, se pueden ver los detalles de los encabezados (headers, en inglés) de la solicitud (request) y la respuesta (response). Además, aparece el contenido de la respuesta, con código o imágenes, según corresponda.

Uso de FireUnit
 
Algunas de las pruebas que se pueden realizar con este plugin son:

• Simular eventos del navegador
• var input = document.getElementsByTagName(”input”)[0];
• fireunit.mouseDown( input );
• fireunit.click( input );
• fireunit.focus( input );
• fireunit.key( input, “a” );