5 extensiones para Firebug

Como ya deberíamos saber Firefox es un navegador que hace las delicias de los desarrolladores, principalmente por disponer de una gran cantidad de extensiones útiles para programadores y diseñadores de páginas web, que una vez instaladas nos ofrecen multitud de ayudas para el desarrollo web, rápido y sin dolores de cabeza. En el manual de Extensiones para Firefox que venimos publicando en DesarrolloWeb.com hemos relatado ya diversas extensiones imprescindibles para desarrolladores.

Ahora en este artículo vamos a mostrar una serie de extensiones que se instalan sobre otra extensión de Firefox llamada Firebug, es decir, son extensiones de una extensión. Firebug es quizás la extensión para Firefox más interesante para el desarrollo de páginas web, puesto que ofrece multitud de utilidades para el análisis de páginas web y búsqueda de errores y problemas de maquetación, etc. Si quieres saber sobre esta imprescindible extensión, consulta el artículo sobre Firebug.

Como decía, existen diversos complementos para Firebug, creados por otros desarrolladores de extensiones, que se instalan por separado y que incrementan todavía un poco más las ventajas para los creadores de webs. Vamos a ver las más interesantes a continuación:

YSlow

Esta extensión de Firebug sirve para controlar la carga de una página web y saber el tiempo de descarga de cada uno de los elementos que la componen, de modo que podamos analizar la velocidad o lentitud de nuestra página. Además, ofrece diversas informaciones y consejos para mejorar el desarrollo de nuestra web y optimizar los tiempos de carga.

Para instalar YSlow
Para encontrar más información de YSlow en DesarrolloWeb.com en español
Para encontrar más información de YSlow en inglés, en la página de Yahoo! (creadores de esta extensión)

Firecookie

Esta extensión para Firfebug sirve para controlar las cookies que dan de alta los distintos sitios web que visitamos en el navegador Firefox. Es una extensión muy útil cuando estamos trabajando con cookies y queremos saber si se están guardando bien en el sistema.

Básicamente lo que hace es mostrar un listado de cookies que han dado de alta el dominio que estamos visitando, de las que podemos ver el nombre de la cookie, el valor que tiene y otras propiedades como sus fechas de caducidad.

Además, permite desde Firebug controlar el funcionamiento de Firefox con respecto a las cookies, para aceptarlas o rechazarlas siempre, eliminar cookies para un sitio web, crear cookies para un sitio, etc.

Para utilizar esta extensión hay que habilitar el panel de "cookies" de Firebug para el dominio con el que trabajamos.

Para instalar Firecookie
Más información en Inglés

Inline Code Finder

Esta extensión permite ver los códigos en línea "inline" que hay dentro de una página web, que quizás se podrían colocar en otro lugar para optimizar el código de la página. Los códigos en línea son aquellos que se insertan en la propia etiqueta HTML y que para ser más "limpios" y coherentes en la programación, se podrían escribir en un lugar distinto.

Por ejemplo, detecta y muestra los estilos CSS insertados con el atributo style en la propia etiqueta HTML, los manejadores de eventos codificados en las propias etiquetas de HTML, por medio de atributos como onclick, onmouseover, etc., o los enlaces Javascript. Como puede que sepamos, es más correcto escribir los estilos CSS en declaraciones CSS aparte, en lugar de en atributos style y por lo que respecta a los eventos Javascript es mejor escribirlos en scripts, separados de las propias etiquetas HTML. La extensión de Firebug Inline Code Finder nos ayuda a encontrar todos estos códigos "mal colocados" en el HTML de la web que estamos visualizando.

Esta extensión, cabe decir, que se encuentra disponible para funcionar dentro de Firebug y también como extensión totalmente independiente.

Para instalar Inline Code Finder como extensión de Firebug
Más información sobre Inline Code Finder en inglés

Pixel Perfect

Es una extensión que permite puperponer una imagen en cualquier página web, encima de la propia página, de modo que veamos cómo quedaría dentro de nuestro diseño. Por ejemplo, podríamos probar cómo quedaría una banda con una imagen en la cabecera de nuestra web, sin tener que alterar la página, simplemente superponiendo la imagen.

Pero para lo que realmente está pensado Pixel Perfect es para superponer nuestro diseño de web, que podemos haber creado en una imagen con un programa como Photoshop, sobre el diseño creado en HTML y ver cuan parecidos o distintos son el uno del otro. De modo que podamos ajustar hasta el último pixel el diseño de nuestra página.

Para instalar Pixel Perfect
Para más información sobre la extensión

FirePHP

Esta extensión es para trabajar con la consola de Firebug desde PHP. Por medio de unas funciones PHP se puede hacer que Firebug reciba mensajes en consola, que el desarrollador puede visualizar en el propio Firebug.

En realidad la extensión FirePHP está pensada para las aplicaciones Ajax, que resultan complicadas para poder mostrar datos por pantalla y hacer debug, debido a que la respuesta que debe dar el PHP está en XML y/o JSON y resulta complicado en esos formatos volcar contenidos de variables u otras cosas que nos ayuden a hacer debug en PHP. Como los mensajes enviados a FirePHP van por otra vía (en datos enviados en la cabecera del response de Ajax, llamados X-FirePHP-Data), no interfieren con las respuestas de las funciones Ajax.

Para utilizar esta extensión se tiene que habilitar el panel "net" de Firebug.

Para instalar FirePHP
Para obtener más información

Más extensiones de Firebug experimentales

Estas no son las únicas extensiones de Firebug, pues la verdad es que hay muchas otras que se están desarrollando. Lo que ocurre es que las otras extensiones están en estado "experimental", al menos en el momento de escribir este artículo de desarrollo web .com. En este estado todavía no se recomiendan más que para probarlas, pero algunas tienen muy buena pinta y espero que se liberen pronto. Para encontrar otras extensiones para Firebug experimentales podemos hacer una simple búsqueda por "Firebug" en el buscador de complementos para Firefox: https://addons.mozilla.org/es-ES/firefox/