Victor Martin Garcia

Para la gente que esté empezando con esto del AJAX voy a explicar una técnica para debugar código AJAX/Javascript desde Firefox.

La extensión Firebug

Firebug es una extensión de Firefox que permite a desarrolladores web editar, debugar y monitorizar CSS, HTML y Javascript en vivo y en directo.

Una vez instalada, aparece un icono de un “tip verde” en la esquina inferior derecha de la pantalla. Si hacemos click en este icono se abre la consola de Firebug. En caso de que la página que tengamos abierta tenga errores de script, en vez del “tip verde” nos sale un icono de “advertencia” y el número de errores en rojo:

Usando Firebug

La consola de Firebug tiene 6 apartados:

• Console: La consola muestra una lista con:
  • Peticiones AJAX (GET o POST) que realiza la página. Muestra el tiempo que han consumido, el fichero que han llamado y si ampliamos su información muestra los headers HTTP (útil para ver las cookies adjuntas), variables enviadas (parámetros POST nombre/valor mandados por AJAX) y la respuesta del servidor (Texto que ha devuelto el servidor AJAX).
  • Errores Javascript que se producen en la página, junto un link dónde puedes explorar el código que ha generado el error.
  • Una línea de comandos dónde puedes ejecutar código Javascript en tiempo real.
• HTML: Muestra el código HTML de la página. Si activamos la opción Inspect, pasando el Mouse encima de un elemento de la página mostrará su HTML. Si activamos la opción Edit podemos modificar el HTML on-the-fly.
• CSS: Muestra los estilos CSS cargados. Podemos inspeccionarlos, editarlos, ver las imágenes, etc.,
• Script: El genial depurador de Javascript. Desde este apartado podemos ver el código JS y añadir Breakpoints y ejecutar instrucción a instrucción. Combinando el debugger con la consola podemos visualizar fácilmente la ejecución de la página.
• DOM: Muestra el árbol DOM de la página. Podemos editarlo en tiempo real.
• Net: Un completo analizador de tiempos de carga de los elementos de la página. Útil para observar el rendimiento de servidores y las integraciones con objetos externos (imágenes, proveedores de anuncios, etc.,)

A desatacar también el modo Profile, que permite buscar cuellos de botella en el código Javascript. Lo activas, navegas por la página y cuando lo finalizas te muestra un completo análisis de los tiempo de carga y ejecución que ha provocado tu navegación.

En resumen, Firebug es una genial herramienta que debería usar todo programador web, ya que facilita bastante los procesos de depuración y optimización.