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 ,  se puede analizar de manera visual la estructura completa de las páginas , 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 ‘serio’ web 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 y luego adaptarlas (las partes que hagan falta) para que funcionen en Internet Explorer. Para hacer funcionar tenemos que tener instalado: Explorador Mozilla  Firefox: Lo podemos descargar de: http://www.mozilla-europe.org/es/ (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: https://addons.mozilla.org/es-es/firefox/addon/firebug/ Pulsar sobre el botón

MWSnap0012 Firebug

 

trans Firebug

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: MWSnap0021 Firebug Seleccionamos la versión que queremos instalar MWSnap0031 Firebug 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. MWSnap012 Firebug

EMPEZAMOS:

Para empezar abrimos una página web cualquiera, por ejemplo: https://codigojavaoracle.com/ 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: MWSnap0041 Firebug 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: MWSnap005 Firebug

INSPECCIONAR ELEMENTO

MWSnap006 Firebug 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. MWSnap007 Firebug 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. MWSnap008 Firebug Además en la parte derecha de la pestaña HTML nos salen los estilos aplicados y el fichero donde están: MWSnap009 Firebug Si no nos gusta el texto de “Desarrollo Web” podemos cambiarlo para ver que tal quedaría otro texto: MWSnap010 Firebug El resultado se obtiene automáticamente en la web: MWSnap011 Firebug

PANEL CONSOLA:

MWSnap030 Firebug 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: MWSnap0311 Firebug 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: MWSnap033 Firebug Nos saltará una ventana de alert en el explorador MWSnap034 Firebug Una gran ventaja  que nos proporciona la consola es que nos permite deshacernos de los engorrosos Alert de 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’) MWSnap032 Firebug 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.

MWSnap035 Firebug

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, ErroresAdvertencias, 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 MWSnap032 Firebug

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

CONTINUARÁ…

 

 

 

Artículos relacionados