Firebug: una navaja suiza para desarrolladores

No me imagino un día normal de trabajo desarrollando páginas web sin Firebug, una extensión para desarrollo de Firefox que te permite hacer mil cosas con ayuda del navegador.

En la parte izquierda, podemos navegar por todo el DOM de la página. En la parte derecha, al posicionarnos sobre algún elemento del DOM (de la parte izquierda) aparecen 3 pestañas muy útiles: Style, Layout y DOM. En Style, podemos ver toda la cascada de estilo del elemento e incluso podemos modificar, agregar y eliminar estilos "en caliente" y verlos de inmediato reflejados en la página que estamos analizando en ése momento.

La dirección para conseguir el plugin de Firefox es ésta: https://addons.mozilla.org/es-ES/firefox/addon/1843/
Hacemos click en el botón verde "Añadir a Firefox" y una vez instalado, lo podemos desplegar en cualquier momento, en cualquier página, haciendo click en el ícono de una cucaracha abajo, a la derecha del navegador.

Otros plugins muy útiles para el desarrollador, y que uso a diario, de la mano de Firebug son:

ColorZilla es un color picker para obtener el color de cualquier pixel.

MeasureIt para medir en pixeles.

Web Developer toolbar ofrece varias opciones para trabajar, como deshabilitar el JavaScript, validar la página, deshabilitar las imágenes, mostrar sus rutas, dimensiones, etc.

HttpFox te da control sobre lo que realmente está cargando el navegador cuando ingresas a una página, haces click a un botón, formulario, etc.

Otra pestaña muy útil es "Net" en la parte derecha, nos permite ver todo el proceso de carga de la página: archivos .js, hojas de estilo .css y en general, todo lo que cargue el navegador para poder desplegar la página, y además les pone cronómetro a cada archivo por separado y en total.