Firebug Logo

Firebug complemento recomendado

 

Firebug es un complemento que puede ser incorporado a nuestro navegador web Mozilla Firefox, para inspeccionar de forma ágil el código fuente de una web que desee analizar, ver cómo está estructurado el código html, que estilos visuales CSS están incorporados a etiquetas particulares y analizar su maquetación web.

Si no lo tienes instalado en tu navegador web en este post, te mostraré paso a paso como instalarlo y luego entrar un poco en detalles sobre como funciona.

 

Pasos para la instalación

1. Ejecuta tu navegador Mozilla Firefox. Si no lo tienes instalado, puedes descargarlo de :

Version en español de: http://www.mozilla.com/es-ES/firefox/

English version: http://www.mozilla.com/en-US/firefox/

Instálelo y ahora si ejecútelo.

2.  Una vez abierto el programa, diríjase a la barra de menús, sección herramientas y click en complementos.

3.  Se abrirá a continuación una ventana que contiene complementos recomendados, para encontrar el complemento firebug, usaremos el formulario de búsqueda y digitaremos firebug y luego haremos click en el ícono buscar (la lupa)

4. Los resultados de búsqueda le arrojarán el complemento que estamos buscando, aremos click en él para que un fondo azul lo resalte como activo y luego haremos click en el botón “añadir a Firefox”.

5. Una nueva ventana se abrirá luego del paso anterior, en esta ventana haremos click en el botón “Instalar ahora”.

6. Luego de que el proceso de instalación automatizado haya finalizado, nuestra ventana original de complementos nos indicara que Mozilla Firefox debe ser reiniciado para completar los cambios; para ello haremos click en el botón “Reiniciar Firefox”.

7. Luego de que Mozilla Firefox sea reiniciado, la ventana de complementos nos indica que se ha instalado un nuevo complemento. Procedemos a cerrar esta ventana desde la esquina superior derecha.

8. Para ejecutar este complemento podemos valernos de varios métodos:

El primero y más práctico es presionando la tecla F12 teniendo nuestro navegador como ventana activa.

El segundo haciendo click en el botón de la parte inferior derecha de nuestro navegador (ver imagen)

El tercero dirigiéndose a la barra de menús, sección ver y luego seleccionando la opción Firebug

La cuarta y última opción que conozco, dirigiéndose en la barras de menús al sección herramientas, opción firebug y en el menú desplegable hacer click en abrir firebug.

9. Para cerrarlo en la ventana que se abre en la parte inferior de nuestro navegador y que es el complemento en sí, este posee unas opciones comunes a cualquier otra ventana como minimizar, restaurar y cerrar (los cuales están en color rojo), este último tiene el ícono de encendido, presionándolo el complemento no estará activo, hasta la próxima vez que usted lo ejecute.

¿Como utilizar el complemento?

Para dar una acercamiento al cómo funciona este complemento, prepare una captura de pantalla de mi web page, teniendo ejecutado el complemento firebug.

En la imagen podemos observar que hay tres zonas claves:

1. Panel de exploración: En este panel por defecto cuando ejecutamos firebug, la etiqueta activa la cual firebug estará analizando es “body”, si queremos ver los elementos que “body” contiene haremos click en el botón “+” que se ve a su izquierda y de la misma manera con cada sub-etiqueta que deseemos analizar sus elementos internos.

2. Ficha de exploración: No solo podemos ver el contenido html de nuestro página analizada, podemos también activar por ejemplo la ficha CSS y ver que estilos en cascada han sido personalizados para la visualización de la página analizada.

3. Estilos CSS del elemento activo: Cuando en la ficha de exploración esta activo “Html” a la derecha del panel de exploración se ve un panel de que contiene los estilos CSS del elemento activo. En la imagen, el elemento activo es la etiqueta “body” asi que lo que se ve en el área de estilos CSS del elemento activo son las propiedades que la etiqueta “body” tiene. Hay varios métodos de visualización de los estilos visuales jerarquizados en las fichas: Estilo (visualización por defecto), Interpretado y mi favorita maquetación en donde veo las dimensiones de margen, borde, rellenado, dimensiones: ancho y alto, z-index y posición: static, relative, absolute, fixed o inherit.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *