Firebug
Firebug es una de las herramientas que considero imprescindibles a la hora de ponernos a desarrollar cualquier aplicación web medianamente compleja, es muy útil a la hora de depurar y trazar código JS, se puede analizar de manera visual la estructura completa de las páginas HTML, permite ver todas las llamadas que se hacen desde la web a la hora de enviar y recibir información y muchisimas más funcionalidades que iremos viendo poco a poco.
La verdad es que desde que lo conozco no me puedo ni plantear comenzar un desarrollo web ‘serio’ sin esta herramienta. Es una pena que para Internet Explorer no existan herramientas tan potentes como esta (existen algunas parecidas pero más básicas), por lo que al final la opción que siempre tomo es desarrollar las aplicaciones para Firefox y luego adaptarlas (las partes que hagan falta) para que funcionen en Internet Explorer. Para hacer funcionar firebug tenemos que tener instalado: Explorador Mozilla Firefox:
Lo podemos descargar de: (La última versión disponible durante la realización de este artículo es la 4.0.1) Una vez tenemos instalado el Firefox hay dos opciones para instalar Firebug Opción 1: Abrir esta pagina web con firefox:
Pulsar sobre el botón
Seguir los pasos Opción 2: Abrir esta pagina web con firefox: http://getfirebug.com/downloads Pulsar sobre la versión de firebug que se desee descargar, saldrá una pantalla similar a esta: 
Seleccionamos la versión que queremos instalar 
En ambas opciones, una vez reiniciado el Firefox aparecerá en la barra inferior del explorador el bichito que quiere decir que ya tenemos firebug instalado. 
EMPEZAMOS:
Para empezar abrimos una página web cualquiera, por ejemplo: https://www.codifica.me/ En un principio firebug debería aparecer deshabilitado, para habilitarlo simplemente pinchamos sobre el bichito y se nos tiene que aparecer una ventanita en la parte inferior de la web: 
Una vez tenemos esta ventana abierta, ya podemos empezar a usar firebug. Os voy a comentar las funcionalidades de firebug que más me han ayudado a la hora de realizar desarrollos web, con esto quiero decir que no se va a abarcar toda la funcionalidad de firebug (para eso habrá que ir a la documentación oficial). http://getfirebug.com/wiki/index.php/Main_Page Vamos a ver la barra de herramientas de firebug: 
INSPECCIONAR ELEMENTO
Si pinchamos este botón y situamos el ratón sobre algún elemento de la web, podemos obtener toda su información y modificarla al vuelo. 
Por ejemplo si nos colocamos encima de donde pone ‘Desarrollo web’, la consola de firebug en su pestaña HTML nos mostrará toda la información sobre este elemento. 
Además en la parte derecha de la pestaña HTML nos salen los estilos aplicados y el fichero CSS donde están: 
Si no nos gusta el texto de “Desarrollo Web” podemos cambiarlo para ver que tal quedaría otro texto: 
El resultado se obtiene automáticamente en la web: 
PANEL CONSOLA:
La pestaña consola nos presenta la información que se va generando según se van produciendo eventos en la página que generen algún tipo de mensaje. Se pueden seleccionar los diferentes tipos de mensajes (html, js, css, red, ajax…) que queremos que se nos muestren en la consola: 
La parte inferior de la pestaña consola es una línia de comandos desde donde podemos ejecutar código javascript, por ejemplo si ponemos esto: 
Nos saltará una ventana de alert en el explorador 
Una gran ventaja que nos proporciona la consola es que nos permite deshacernos de los engorrosos Alert de javascript que todos hemos utilizado alguna vez a la hora de desarrollar código JS La consola nos proporciona una serie de métodos que podemos utilizar dentro de nuestro código JS para trazar el código sin necesidad de estar todo el rato cerrando ventanitas de alert. console.warn(‘mensaje warn’) console.error(‘mensaje error’) console.info(‘mensaje info’) console.debug(‘mensaje debug’) 
NOTA 1: Todas estas trazas luego hay que quitarlas del código ya que en otro explorador tipo Internet Explorer o en un firefox que no tenga instalado firebug producirian un error JS NOTA 2: El objeto console ofrece más métodos de los que hemos visto aquí (sólo trazas) yo no los he usado pero seguro que aportan cosas interesantes.
A continuación vamos a ver los diferentes botones del panel Consola: Limpiar: Limpia todos los mensajes de la consola. Persistir: Hace que aunque se refresque la pantalla (F5) no se pierda la información de la consola. Perfilar: Si se pulsa este botón se activa el modo análisis de la actividad javascript, todos los comandos JS son analizados, listados y se presentan unas estadísticas de su rendimiento, si se vuelve a pulsar el botón perfilar se para el análisis y se presentan los resultados de toda la actividad JS Los botones de Todo, Errores, Advertencias, Información e Información de Depuración sirven para filtrar el tipo de mensajes que queremos ver en la consola. Este seria un ejemplo con el botón Todo
Se ven todos los tipos de mensajes. Con Errores sólo se vería el mensaje ‘error’ Con Advertencias sólo se vería el mensaje ‘warning’ Con Información sólo se vería el mensaje ‘info’ Con Información de Depuración sólo se vería el mensaje ‘debug’ .
Quedan pendientes de analisis los paneles: PANEL HTML, CSS, SCRIPT, DOM y RED