Estás en... Home > Otras cosas > Conoce a fondo FireBug 1.5. La herramienta imprescindible para el desarrollador web.

Lo primero, ¿qué es Firebug?

Firebug es un complemento de Firefox que pone a disposición de los desarrolladores de páginas webs, una gran cantidad de utilidades para la edición en vivo de HTML, CSS, depurar código Javascript, monitorear las descargas, y otro montón de funcionalidades que lo han convertido en la herramienta imprescindible para cualquier diseñador o programador web.

Firebug puede instalarse desde la web getfirebug.com. Firebug sólo funciona en Firefox, y aunque existe una versión reducida para el resto de los navegadores, es tan simple que no merece la pena (las herramientas que incluyen todos los navegadores son muy superiores)

Una vez instalado verás que aparece un pequeño icono de una cucaracha en la parte inferior de Firefox. Pinchando encima abres la ventana de Firebug en la que trabajaremos.

 

En busca de la perfección... Edición instantánea de HTML y CSS.

Sin duda, de todas las funcionalidades de Firebug, la que lo hace especialmente útil es la de edición en vivo de HTML y CSS. Desde la pestaña de HTML tenemos acceso a todo el código HTML y los estilos CSS que se aplican a cada elemento de la página web. En la parte de la izquierda tenemos todo el código HTML, y en la derecha las CSS.

Trabajo básico con HTML

Podemos fácilmente navegar por el árbol y ver el código HTML tal como está en la página en ese momento. Firebug es especialmente útil aquí, porque muestra el HTML en “ese momento”, es decir, nosotros podemos tener una web con un HTML que sea modificado vía Javascript, pero cuando lo visualizamos con Firebug lo que vemos es la versión modificada por el Javascript.

Cada vez que se produce un cambio en el HTML, ya sea que lo hayamos hecho nosotros modificando elementos desde Javascript, o desde la consola, o una modificación debida a un código Javascript, Firebug resalta el cambio para que sea sencillo identificarlo.

Si necesitamos buscar el código HTML de algún elemento, podemos hacerlo de forma visual o mediante el buscador de texto. Para hacerlo de forma visual podemos utilizar la herramienta de inspección

Si eres de los que disfrutan con los atajos del teclado, la combinación de teclas Control + Shift + C, tiene el mismo resultado que la selección de la herramienta inspeccionar.

Otra forma es utilizar el menú contextual, colocando el ratón encima del elemento que deseamos inspeccionar y pinchando en “inspeccionar elemento”.

La otra forma de localizar elementos dentro del HTML de forma rápida es mediante el buscador. En la parte de la derecha hay un pequeño buscador en el que según vayamos escribiendo Firebug irá buscando de forma incremental.

Una vez hemos localizado el elemento que deseamos, es sencillo conocer todos sus “parents” y recorrer todo el árbol. En la parte de arriba aparece toda la ruta hasta el elemento que estamos inspeccionando. De esta forma podemos saltar de un elemento a otro de forma sencilla e inspeccionar las distintas propiedades de cada uno. Esta es sin duda una de las opciones que más nos pueden facilitar la vida y ahorrarnos mucho tiempo navegando por el código.

Firebug permite la edición en vivo del HTML y ver los resultados que tiene al instante. Podemos, desde editar un texto, hasta modificar bloques enteros de código. Añadir o modificar atributos de los elementos del HTML, o eliminar elementos que no deseemos ver. Pero cuidado, no existe forma alguna de guardar esas modificaciones del HTML. Esta es una de las funcionalidades que más se piden y los desarrolladores ya han mencionado en un futuro estará disponible.

Para editar textos o atributos del HTML, simplemente tenemos que pinchar sobre el elemento y modificarlo.

Si necesitamos hacer ediciones más complejas, para añadir o modificar bloques completos de HTML, podemos utilizar la opción “Editar HTML” del menú contextual sobre el elemento que deseemos modificar.

También podemos acceder a la edición pinchando en el botón “Editar” que tenemos arriba a la izquierda. En tal caso estaríamos editando el elemento que estamos inspeccionando en ese momento.

En cuanto terminemos de modificar el código, los cambios se visualizan de forma inmediata en la página web. Si quisiéramos añadir un nuevo atributo a alguno de los elementos, podríamos hacerlo con la opción anterior o mediante la opción “Añadir nuevo atributo” del mismo menú.

Otras opciones que tenemos con el menú contextual son las de “eliminar elemento”, que como su nombre indica elimina el elemento sobre el que se ha desplegado el menú contextual, y las distintas opciones de “Copiar...” que aparecen arriba y que permiten copiar trozos de HTML. No voy a entrar en detalle en estas opciones porque su funcionamiento es obvio.

Trabajando con CSS

Dentro de la misma pestaña de HTML, en la parte de la derecha, tenemos un cuadro donde podemos inspeccionar los estilos que se se aplican en cascada al elemento que tenemos marcado. Lo mejor de este cuadro es la potencia y flexibilidad a la hora de realizar cambios y comprobar el resultado en tiempo real en el propio navegador.

Inspeccionando los estilos de un elemento

Cuando seleccionamos un elemento en el HTML para inspeccionarlo, en la parte de la derecha tenemos toda la información sobre los estilos que se aplican sobre ese elemento.

Podemos ver toda la información sobre el estilo, conocer la línea de código y al archivo donde se definen los estilos que se aplican, y si nos desplazamos hacia abajo en el cuadro donde se muestran los estilos podemos ver toda la información sobre de donde se heredan los estilos que se aplican a ese elemento.

Firebug es muy bueno en la inspección de los estilos, y tiene opciones muy útiles, como la previsualización de las imágenes utilizadas como background de los estilos. Simplemente poniendo el ratón encima hace que se muestre la imagen. Y no solo muestra la imagen, sino que indica el tamaño en pixels, y encima te da la posibilidad de abrir la imagen en una nueva pestaña (lo cual es muy útil para descargar imágenes usadas en los estilos)

Con los colores pasa lo mismo. Colocando el ratón sobre el color podemos ver una previsualización del mismo.

En la parte superior del cuadro de inspección de estilos, existen dos pestañas adicionales, “maquetación” y “DOM”. La pestaña de maquetación es todo un regalo para los diseñadores que luchan hasta conseguir cuadrar el último pixel.

Cuando seleccionamos un elemento del HTML y vamos a la pestaña de maquetación, podemos ver la información del “box model”. Y lo mejor, al colocar el ratón sobre las cajas, aparecen una guías que nos permiten comprobar y medir la posición del elemento con respecto a los elementos de su alrededor de forma visual.

Edición de los estilos

Pero vamos a comenzar con la parte buena del trabajo con Firebug, la edición de las CSS. Pinchando sobre el nombre del atributo o sobre el valor del mismo podemos editar fácilmente los valores de ambos.

No es necesario tener altos conocimientos de CSS, porque si pinchamos sobre el valor que deseamos editar y usamos las teclas de arriba o abajo, Firebug irá mostrando los valores válidos que podemos utilizar en ese atributo. De esta forma podemos ir aprendiendo CSS al tiempo que vamos trabajando.

Las mismas teclas de arriba o abajo, nos permiten una edición muy sencilla de los valores numéricos. Si tenemos un elemento con un ancho, un alto y posicionamiento en píxeles, por ejemplo, simplemente colocando el puntero sobre este valor y usando las teclas arriba o abajo, podríamos modificar uno a uno los píxeles y ver el resultado de esta modificación en tiempo real.

Otras opciones interesantes del trabajo con CSS son la posibilidad de ocultar estilos pinchando en el símbolo de prohibido al lado del atributo que deseemos ocultar

O añadir nuevos atributos, haciendo doble click en el cuadro de estilos o pinchando en la opción “Propiedad nueva” en el menú contextual del cuadro de estilos.

Si además de esto, mientras estamos haciendo pruebas necesitamos editar los estilos de un elemento HTML que no tiene previamente definido ningún estilo, podemos hacer dos cosas, una de ellas sería añadir el atributo style al elemento HTML directamente en el cuadro de inspección del HTML y darle el valor que quisiéramos,

Y la otra opción mucho más cómoda sería seleccionar la opción “Editar estilo del elemento” del menú contextual del cuadro de CSS. Lo que modificaría el HTML y añadiría el atributo style=”” en el elemento, tal como hemos hecho nosotros antes a mano.

Esta es una buena opción cuando estamos comprobando el efecto que tendría modificar o añadir estilos a un elemento.

Posibilidades de edición desde la pestaña de maquetación

Antes hemos mencionado que desde la pestaña de maquetación se puede visualizar el “box model” del elemento, y ver visualmente el margen, el padding, etc... Al igual que casi todo en Firebug, pinchando sobre los número que aparece en el modelo, podemos modificar todos los datos, que se verían reflejados instantáneamente en la CSS. Es una forma bastante cómoda de trabajar con el Layout de nuestro diseño.

Guardando las modificaciones realizadas en Firebug... Firediff.

Al igual que con el cuadro de HTML, Firebug no permite guardar los cambios realizados. El objetivo de Firebug es ayudar al desarrollador a depurar, encontrar y solucionar problemas en el HTML, CSS y como veremos posteriormente en el Javascript. Por lo que los cambios que hagamos en las CSS deberán ser luego copiado en el código para dejarlo igual.

Pero si estás modificando CSS y te interesa mucho poder guardar los cambios que realizas en Firebug, en un fichero en tu disco duro (y no tener así que repetir el trabajo) Existe una extensión para Firebug llamada Firediff, y que puede instalarse desde

http://www.incaseofstairs.com/category/firefox/firediff/

Que permite inspeccionar los cambios que has realizado mientras que trabajabas con Firebug y guardarlos en una copia local. Una vez instalado aparece una nueva pestaña llamada “Changes”, que muestra los cambios de la CSS original a la versión modificada que se muestra en Firebug.

Si deseas guardar la versión modificada, puedes seleccionar la opción “Save Snapshot” del menú contextual que aparece al pinchar con el botón derecho del ratón en el cuadro de “Changes”.

Depurar código Javascript ya no es un problema

Y si para los diseñadores Firebug es una auténtica joya, para los programadores de Javascript es un regalo caído del cielo. Firebug permite depurar el código Javascript de forma sencilla y casi igual que los entornos de desarrollo que integran depuradores de código.

Con Firebug se pueden establecer puntos de ruptura para inspeccionar el valor de las variables mientras se ejecuta el javascript.

Desde la pestaña de “Script”, tienes acceso a todos los archivos de Javascript cargados en la página. Puedes acceder para visualizar el código y activar las opciones de depuración.

Cuando estás visualizando el código, si deseas establecer un punto de ruptura en el que el código Javascript pare de ejecutarse y así poder inspeccionar sus valores, simplemente tienes que pinchar encima del número de la línea de código donde deseas que el código pare de ejecutarse

Puede establecer todas los puntos de parada que desees. Además, puedes estableces puntos de parada que se ejecuten sólo cuando se cumpla cierta condición. Para hacerlo, debes pinchar con el botón derecho encima del punto de ruptura, eso hará que aparezca un cuadro de diálogo en el que puedes indicar una condición que en el caso de cumplirse, hará que el código se detenga en esa línea. Por ejemplo, en la siguiente imagen, el código sólo para de ejecutarse si cuando se ejecuta la línea de código, se cumple la condición de que “a == 1”

Una vez detenida la ejecución del código, las opciones son casi las mismas que hay en la mayoría de entornos de desarrollo integrados. Puede decidir avanzar paso a paso para inspeccionar el valor que van tomando las variables de Javascript, entrar en método, saltarlo, salir del método o continuar la ejecución del Javascript. Podemos ejecutar estas acciones pinchando en los iconos de la parte de arriba

En la parte de la derecha tenemos en todo momento el valor actual de las variables de Javascript. Podemos acceder al valor de todos los objetos que estén definidos en ese momento en ese contexto. Pero lo mejor de todo, es que al igual que con casi todo en Firebug, podemos no solo visualizar esos valores, sino que además podemos editarlos y cambiarlos en el momento, lo que nos permite simular distintos resultados creados por nosotros en ese momento. Esto hace de Firebug una herramienta muy potente e indispensable para cualquier desarrollador Javascript.

Si la variable que deseamos seguir no aparece de forma automática, podemos escribirla nosotros mismos para hacerle el seguimiento

Y además de eso, si estamos dentro del contexto donde está definida una variable o expresión, y ponemos el ratón encima sobre el código, aparecerá un “tooltip” con el valor de la misma

Otras opciones interesantes del trabajo con Javascript

Si necesitamos buscar una línea de código, podemos escribir en el buscador el número de la línea precedido por #. Eso nos llevará directamente a la línea de código que estamos buscando.

En ocasiones puede ser más interesante loggear los valores de las variables según vamos ejecutando el código, en lugar de utilizar el debugger de Javascript e ir avanzando paso a paso. En casos como este, Firebug pone a disposición de los desarrolladores el objeto “console”, que puede ser usado para escribir en la consola de Firebug lo que deseemos.

Por ejemplo,

console.warn(“Este mensaje aparece en la consola como un mensaje de advertencia”)

Esto provocaría que el mensaje anterior apareciese en la consola como un mensaje de advertencia. Lo mismo puede aplicarse con “console.log”, “console.info” y “console.error”.

El objeto console tiene muchas aplicaciones realmente útiles para los programadores Javascript. Por ejemplo, este objeto permite definir relojes para realizar análisis de rendimiento del código. Para hacerlo, en cualquier parte del código que deseemos analizar podemos hacer los siguiente

console.time(“nombre”)

// código a analizar

console.timeEnd(“nombre”)

Cuando se ejecute el código, en la consola se mostrará la información de análisis del trozo de código enmarcado en el temporizador. Esto puede marcar la diferencia en partes donde la velocidad de ejecución sea crítica.

Para más información sobre el objeto console, puedes acceder a la Wiki de Firebug en la dirección http://getfirebug.com/wiki/index.php/Console_API.

Más sobre el trabajo con la consola

Y si todo lo anterior no es suficiente para el desarrollador Javascript, desde la pestaña “consola” se puede acceder a un terminal desde el que ejecutar líneas de código directamente en la página. Por ejemplo, si accedemos a la consola, escribimos la línea de código

alert(“holita”)

Y pulsamos “Enter”, eso provocaría la ejecución de la línea y mostraría el mensaje en la pantalla. Podemos ejecutar líneas individuales de código o bloques completos. Para ejecutar bloques debemos mostrar la consola en modo “multilínea”. Para hacerlo pinchamos en el icono de la flechita que hay en la parte de abajo a la derecha

Lo que mostraría el editor en el que podemos escribir varias líneas de código y ejecutarlas todas a la vez pinchando en “Correr”. En la siguiente imagen se muestra un ejemplo de esto

Por supuesto, desde la consola podemos acceder a cualquier código y variables Javascript que hayan sido definidas en la página.

Optimiza la carga de tu web con el monitor de red

El monitor de red te permite acceder a la información de peticiones de red de tu web. Puedes acceder a las peticiones de carga, saber que archivos han tenido que descargarse, cuales se han cargado desde la caché, acceder a todas las peticiones AJAX y saber el tiempo de carga de cada una de estas peticiones.

Es una buena forma de saber que parte de tu web son más lentas de cargar, y son un buen punto de partida para saber por donde empezar a optimizar.

Cada vez que se realiza una petición de red, esta queda registrada en el monitor de red. Puede verse el tiempo de la misma y las cabeceras de petición y de respuesta. De nuevo, esto puede ser muy útil cuando se trabaja con Javascript y llamadas AJAX. Aquí podemos ver lo que devuelve el servidor tras una llamada y comprobar “que está fallando”.

Existe una extensión de Firebug bastante interesante llamada Yslow, esta extensión estudia diversas formas de optimización del rendimiento de una web y te da consejos de optimización de la misma. Está creada por los desarrolladores de Yahoo! Y puede descargarse desde

http://developer.yahoo.com/yslow/

Resumiendo...

La intención de este artículo era dejar ver el gran potencial que tiene Firebug y lo necesario que es para el desarrollador web. Es una pena que sólo esté disponible para Firefox y que no haya nada tan potente en ningún otro navegador. Lo que hemos visto aquí es sólo la funcionalidad por encima, Firebug esconde mucho más.. Desde todas las extensiones que se pueden descargar desde la propia web de Firebug hasta un API completo que permite crear nuestras propias extensiones.

Sin duda, la herramienta más completa e imprescindible para diseñadores y desarrolladores web.