• Firebug, una herramienta fundamental para cualquier desarrollador web


    Ya estoy de vuelta con un nuevo post. Hoy voy hablar (escribir) sobre Firebug, una herramienta fundamental para cualquier desarrollador o maquetador web. Muchas veces, la gente que está comenzando en el mundillo, me pregunta qué navegador utilizo como principal (para ver los resultados de los desarrollos) y por qué. La respuesta es Firefox y la razón es por el Firebug. Sé que alguno dirá que también está para Chrome (en realidad es la versión LITE), pero como señala la propia web, no es el sustituto del Firebug. Antes de profundizar, quiero comentar que en este post haré una introducción para “rookies” a las características más destacadas de la herramienta. En el futuro, haré uno más detallado, en función del interés mostrado.

    Básicamente, Firebug nos permite editar, monitorizar y depurar CSS, HTML y JavaScript “en vivo” en cualquier web. Esto, obviamente, facilita infinitamente nuestra vida, pues poder editar código (CSS y HTML) sin tener que recargar la página o poder depurar un script paso a paso para saber, por ejemplo, por qué el script no realiza un condicional correctamente, es una de esas cosas que hacen que se te humedezcan los ojos de la emoción. Para colmo, es totalmente gratis (aunque yo pagaría gustosamente si no lo fuese). Ya sé que el inspector de elementos de Chrome también permite estas funciones pero la interfaz de Firebug es mucho más legible que el inspector de Chrome.
    En la siguiente imagen, podemos observar cómo se muestra el Firebug por defecto, en la parte baja del navegador. Es importante que el ancho de la ventana del navegador sea lo mayor posible para que podamos ver el código HTML y CSS cómodamente.
    firebug
    Como se puede ver en la imagen, Firebug consta de 2 partes separadas y unas pestañas en la parte superior. Por defecto, nos mostrará en la ventana mayor (la de la izquierda) el código HTML y en la derecha la hoja de estilo CSS para el elemento que hayamos seleccionado. ¿Cómo se selecciona un elemento? Es muy sencillo, basta con poner el mouse encima del elemento (texto, imagen, botón, etc) y hacer click derecho, como se muestra en la imagen. ¡OJO! No hay que confundir el inspector de elementos del Firefox con el Firebug.inspeccionar
    De inicio, es importante activar la consola de red y el depurador de scripts. Para ello, vamos a las pestañas correspondientes (Red y Script, primero a una y luego a otra) y al pulsar sobre el icono de desplegable, seleccionamos “activado”. Cookies debe estar activado por defecto, pero si no es así, repetimos el procedimiento en Cookies.
    Una vez seleccionado un elemento de la web, en la pestaña HTML veremos que, como ya comenté antes, aparece el código HTML y el CSS aplicado a dicho elemento. En cualquiera de las dos ventanas podemos editar el código, viendo el resultado en vivo. Una cualidad fantástica del monitor CSS es que te dice la ubicación del archivo y la línea de código del estilo aplicado a dicho elemento, lo que te permitirá ir rápidamente al .css y cambiar lo que necesitas. IMPORTANTE: debemos tener en cuenta que cualquier cambio realizado en el Firebug NO se graba en los archivos. De hecho si recargamos la página, los cambios desaparecen.
    Dentro del monitor de CSS (ventana derecha) podemos observar 3 pestañas más aparte de la de Estilo: Calculado, Plantilla y DOM. Calculado permite conocer que estilos se le están aplicando al elemento en cuestión, agrupado en 5 grandes familias: Texto, Fondo, Modelo de caja, Plantilla y Otro. La pestaña Plantilla te ofrece ver los márgenes, bordes, rellenos y ancho por alto de forma visual. Por último, DOM permite inspeccionar las propiedades DOM del elemento seleccionado. Debo reconocer que esto no lo utilizo casi nunca, aunque no significa que no esa útil para otros.

    La pestaña CSS nos ofrece la opción de editar todas las hojas de estilo que el navegador ha cargado. Esto nos puede servir para asegurarnos que todas las hojas de estilo que hemos declarado en el header, se han cargado correctamente o insertada en medio del body. La lista aparece cuando pulsas la pestaña con el nombre de una hoja de estilo (*.css) justo debajo de CSS. Además, permite filtrar la lista por nombre. En la ventana derecha, aparecerá un monitor para probar selectores y ver cuales son los elementos que coinciden.

    La pestaña Script nos muestra una lista donde seleccionar el código del script que hemos seleccionado (ventana izquierda) y un monitor para realizar el seguimiento de expresiones (sentencias) o variables. Este monitor es extremadamente útil porque permite escribir cualquier tipo de sentencia o expresión, lo que nos ayudará a conocer si una variable está guardando el valor que queremos o si un condicional se está cumpliendo (o no), por ejemplo. También admite sentencias de jQuery, así como selectores. A la hora de desarrollar, este panel es, bajo mi punto de vista, el más útil de todos. Otro añadido que tiene este panel es la posibilidad de incluir puntos de parada (breakpoints) en nuestro código para realizar una depuración paso a paso.

    Con DOM, podremos inspeccionar y manipular cualquier propiedad del DOM. Este panel te permite conocer los tipos de variables (objeto, strings, arrays) y las funciones declaradas en la página.

    El panel de Red es otro que tiene gran importancia, pues permite ver los tiempos de carga en la web por peticiones, es decir, cada vez que se realiza una petición al servidor aparece el tiempo que ha tardado en recibir dicha petición.
    Por último, está el panel de Cookies, el cual no suelo utilizar casi nunca. Es básico pero muestra la suficiente información relativa a cookies, como el valor almacenado, cuando expira la sesión, etc.

    Con esto, termino el post de hoy que me he extendido más de lo habitual. Espero que haya gustado esta ¿breve? introducción al Firebug. Cualquier comentario o duda que tengas, no duden en realizarla.

ANÍMATE A COMENTAR

4 comentarios
  • Chosi
    27 November 2013
    Responder

    Buena pinta tiene . He de echarle un vistazo, que soy un aprendiz en este mundillo. Me gusta sobre todo que se pueda usar para JS, Muchas gracias.

    • OBR
      29 November 2013
      Responder

      No te pierdas el siguiente artículo de Firebug, donde comentaré más a fondo las diferentes características.

  • Victor-)
    4 December 2013
    Responder

    Genial! Lo he comenzado a usar y me has conquistado 😉

    • OBR
      5 December 2013
      Responder

      Gracias Víctor! Mi próximo post trataré Firebug más en profundidad, no te lo pierdas!