Las Páginas web analizadas con Firebug

Un artículo de ... manu Comments

Sin comentarios

Firebug large icono Firebug es un complemento para Mozilla Firefox (creo que va más allá), que todo programador cuenta en su cajón desastre, útil por sus características y funcionalidades. Una herramienta eficaz que ponen a nuestro alcance, y que puedes instalar en tu navegador basado en mozilla, sin apenas esfuerzo. Creo que no deberias perderte este complemento si te gusta la programación web, pues podrás ver el código fuente de muchas páginas web de internet. Bueno no todos, pero si el Html, javascript y otros.

Características destacadas de Firebug…

Navegación por el árbol HTML: En vez de presentar el código fuente de la página en una página plana normalmente “infumable” para el usuario corriente, éste complemento representa la página como un sencillo árbol (ver captura) a través del cual el usuario puede navegar expandiendo sus nodos hasta el nivel de detalle que quiera. Además puede editar las etiquetas HTML viendo inmediatamente el efecto del cambio en la página.

Inspección y análisis de partes concretas de la página: Firebug incluye una especie de puntero especial que permite inspeccionar los elementos HTML de la página. Para ello el usuario pulsando el botón de inspeccionar (ver captura) activa esta función y a partir de ahí conforme se desplaza con el ratón por la página puede ver como un recuadro de color azul va identificando el elemento HTML que se encuentra en la posición del ratón a la vez que ve como en la parte inferior se va seleccionando ese elemento dentro del árbol que representa a la página. Si el usuario hace “clic” con el ratón sobre el recuadro azul se mantiene la selección actual y ya puede inspeccionar con calma los detalles del elemento HTML seleccionado.

Inspección y análisis de la jerarquía de hojas de estilo: Tanto si el usuario se desplaza por el árbol HTML como si inspecciona la página con la función de inspeccionar los elementos de página podrá contemplar otra información realmente interesante: en la parte derecha verá la jerarquía de hojas de estilo y los propios estilos empleados en la página (ver captura). Similar a la modificación sobre la marcha del HTML vista antes, puede seleccionar cualquier propiedad de cualquier estilo y manipularla, incluso crear nuevas propiedades viendo de inmediato el resultado de su acción.
La fuente…

Detalle del complemento en acción…

Consola de Firebug explicado al detalle…

La consola de Firebug es el mejor sustituto de los intrusivos alerts de toda la vida. Ya no es necesario detener la ejecución de un código congelando el navegador para ver el valor de un variable o para comprobar si nuestro script pasa por un determinado punto. En su lugar, podemos enviar mensajes personalizados con distintos estados a la consola que nos muestren valores en tiempo de ejecución a la vez que controlamos el flujo de la aplicación.

El icono de Firebug en Mozilla Firefox…