FireBug: Herramientas para desarrollo web (I)

Firebug: se integra a Firefox para, al igual que la extensión Web Developer, ayudarte a desarrollar, evaluar y depurar sitios web, controlando el CSS y HTML en tiempo real, midiendo el tiempo de carga para optimizar la página o corrigiendo los posibles inconvenientes con Javascript.

Ofrece múltiples posibilidades entre las que destacamos:

• Edición de HTML en tiempo real: Las ventajas de esto son muchas y creo que no hace falta mencionarlas. Firebug nos permite ver el código fuente y editarlo mientras vemos como quedan los cambios, destacando las modificaciones que realizamos nosotros. Tiene un buscador integrado y nos permite exportar los cambios fácilmente.
• Inspecciona tu hoja de estilos: También podremos editar los estilos en tiempo real, autocompletando las propiedades si asi lo quisieramos. La interfaz para esto es realmente muy intuitiva.
• Monitorea el tiempo de carga de las páginas: Muchas veces optimizar un sitio web se vuelve complicado, en particular con sitios con muchas imágenes, javascript y hojas de estilo. ¿Cómo sabemos cual es el mayor causante de la lentitud de carga? ¿Cómo sabemos donde debemos trabajar para mejorar la velocidad de carga? Ésta extensión nos muestra cáda petición realizada al sitio y los segundos de demora en obtenerla.

• Depurador de Javascript: Aquí Firebug realmente se destaca por sobre cualquier otra extensión. Podemos buscar los scripts fácilmente y pausarlos en el momento que nosotros querramos. También detecta exactamente en qué linea de código existe un error si lo hubiera y también medir el tiempo de carga de cáda función.

Enlace de descarga: FireBug

También existe Companion.JS, aunque es una viene a ser una versión limitada para Internet Explorer.

En Google Chrome todavía no está disponible, pero mientras esperamos que Google Chrome soporte extensiones podemos hacer uso de Firebug Lite, un archivo JavaScript que simula algunas características de Firebug y que puede ser usado en cualquier navegador.

Se puede hacer casi lo mismo con Google Chrome, siguiendo estos pasos, que me ha dicho Juan Rived del blog “AllGeek“:

1. Clic en el botón de la “Hoja“
2. Seleccionar la opción “Opciones para desarrolladores“
3. Consola de JavaScript o pulsar la combinación de teclas “Ctrl + Mayus + J“

Opciones de desarrolladores, el FireBug para Google Chrome.

Anuncios