Firebug es una de esas herramientas indispensables para todo desarrollador de páginas web, nos permite encontrar errores en nuestro código muy rápidamente ya sea html, css o javascript.
Podemos descargarlo desde su site

¿Como funciona?

Luego de instalar Firebug en nuestro Firefox, debemos apretar la tecla F12 y se nos mostrará las consola de firebug como esta

consola-firebug

Consola Firebug

Esta es una de las pestañas más interesantes en esta se mostrarán los errores javascript, en caso que aparezca un error basta dale un click y nos llevará a la linea donde se produce el error, además podemos ver las llamadas AJAX, tanto los datos que enviamos como la respuesta, incluso los errores con nuestro CSS aparecerán aqui

consola-firebug2

Firebug HTML

Esta es una de las pestañas mas interesantes a la hora de arreglar esas páginas que se descuadran o para maquetar y acomodar nuestro diseño, en la parte izquierda esta el codigo HTML, si deseamos ubicar una sección en nuestra página basta darle click al segundo ícono (Inspeccionar) y asi podremos ubicar rapidamente el elemento que queremos editar; a la derecha esta el CSS del elemento HTML que hemos seleccionado con tres pestañas:

• Estilos, donde aparece una lista de los estilos aplicados al objeto, es posible editarlos directamente o agregar estilos aunque estos cambios no se grabarán
• Maquetación, la segunda pestaña nos muestra el tamaño del elemento, margenes y padding de nuestro elemento
• DOM, nos muestran los detalles de nuestro elemento

Firebug CSS

Aunque me parece más util la anterior pestaña, aqui podemos editar directamente nuestro codigo CSS

Firebug Script

Desde esta pestaña, Firebug nos permite ver nuestros javascript, pudiendo iniciar la depuración, mostrarnos errores en el código

script-firebug

Firebug Red

Esta es una de las pestañas más importantes para optimizar nuestro sitio, nos muestra los tiempos de carga de los distintos elementos y además nos indica si falta algún archivo.

red-firebug

Complementos de Firebug

Además existen algunos complementos para firebug, para este tutorial por ejemplo he usado Firecookie, un plugin que me permite ver las cookies creadas, una herramienta ideal a la hora de hacer sistemas de login, carritos de compras y otros, aunque existen algunos agregados mas para Firebug