Guía FireBug, el mejor complemento para un desarrollador web

Hoy desde Seoveinte te traemos una guía muy completa de una herramienta indispensable para los que hacemos páginas web.
En esta guía descubriremos el complemento Firebug para Firefox y detallaremos todas sus funciones ideales para cualquier desarrollador Web.

¿Qué es Firebug?

Firebug, es una de las herramientas indispensable para el desarrollo de tus páginas webs.
Nos permite debugear, monitorizar y modificar el CSS, HTML y JavaScript a medida que lo visualizamos en el navegador.
Firebug tiene varios usos el más importante para mi fue el aprendizaje ya que llegaba a una web veía algún código o estructura CSS que me había llamado la atención y podéis entender como el desarrollador había conseguido lograrlo.
El plugin requiere de cierto proceso de aprendizaje relativamente corto.
Características principales:

• Integrada con Firefox.
• Open source.
• Gratuita.
• Interfaz intuitiva.
• Complemento perfecto como herramienta de desarrollo web.

Funcionalidad:

• Edición en tiempo real de HTML.
• Edición en tiempo real de CSS.
• Edición en tiempo real de Javascript.
• Disposición de CSS.
• Depurador Javascript.
• Buscador integrado.
• Monitorización de la actividad de la red.
• Explorador del DOM.
• Gestor de errores en Javascript, CSS y XML.

Instalación de Firebug

Importante: Esta guía se realiza con la instalación de Firebug 1.7 en Firefox 5. Si tienes una versión distinta puedes encontrarlas  aquí.

• Firefox 5.0 users: install Firebug 1.7 (o Firebug 1.8 Beta)
• Firefox 4.0 users: install Firebug 1.7
• Firefox 3.6 users: install Firebug 1.7

Descargamos Firebug 1.7 desde su página oficial https://getfirebug.com/downloads/ o directamente desde https://addons.mozilla.org/es-ES/firefox/addon/firebug/
En la página de Firefox pulsamos en “Añadir a Firefox“. Si no habéis elegido la versión adecuada no os dejara instarla.

Firefox evitara que el plugin se instale automáticamente y solicitara nuestro permiso asi que cliqueamos en Permirtir.
Se descargara el complemento Firebug y se le preguntara si confiamos en el autor y le decimos que si dandole a “Instalar ahora“. Luego nos dirá que reiniciemos Firefox para que podamos empezar a usar el plugin.

Configurar Firebug

Firebug es muy fácil de configurar por sus escasas opciones de configuración.
Para acceder a ellas en Firefox 3.6 y anteriores vamos a Herramientas -> Firebug. En las versiones F4 y F5 deberemos pulsar F12, nos saldrá el plugin. En su icono pulsamos y encontraremos las opciones del plugin.

• Abrir Firebug en Ventana Nueva : Ejecuta Firebug en una ventana nueva independiente de la página

Esta opcion no es muy útil con un solo monitor ya que el cambio de ventana ralentiza el trabajo, eso sí con más de un monitor está opcion es todo un lujo.
En Abrir con Editor, a la hora de trabajar con HTML, CSS etc, podemos configurar FireBug para ello indicamos el nombre que se le da al editor, la ruta del ejecutable del editor y los parámetros necesarios.

Utilizar Firebug

Una vez elegida la web donde queremos trabajar podemos iniciar el plugin de varias formas.

• Ver >> Firebug : La forma de ejecución se especifica en la configuración del punto anterior.
• F12 : Firebug se ejecuta integrado en la parte inferior de ventana de la página (independientemente de la configuración).
• Control + F12 : Firebug se ejecuta en una ventana nueva (independientemente de la configuración).
• Herramientas >> Firebug >> Abrir Firebug.
• Herramientas >> Firebug >> Abrir Firebug en Ventana Nueva.
• Clic sobre la imagen del bicho en la barra inferior del navegador.
• Botón derecho del ratón sobre la imagen del bicho en la barra inferior del navegador >> Abrir Firebug en Ventana Nueva.

Con Firefox 4 y 5 algunas opciones desaparecen y otras están menos accesibles teniendo que activar la barra de menú del navegador. Para no tener que Habilitar/Deshabilitar la barra del menú detallaremos la forma de ejecutar Firebug en Firefox 4 y 5.

• F12 : Firebug se ejecuta integrado en la parte inferior de ventana de la página (independientemente de la configuración).
• Control + F12 : Firebug se ejecuta en una ventana nueva (independientemente de la configuración).
• Clic sobre la imagen del bicho en la parte superior del navegador, a la derecha del Buscador y encima de Marcadores.

Botón FireBug (Bicho)

En pasos anteriores ya hemos visto las funciones del botón que no son más que la configuración del complemento.

• Abrir con editor: Opción para configurar Firebug con un editor.
• Tamaño del texto: Pemite cambiar el tamaño de la letra.
• Opciones: Opciones de configuración del complemento.
• Red Firebug: Accede a los sitios web del proyecto.
• Inspeccionar Elemento: Inspecciona un elemento de la página.
• Perfilador de Java Script: Activa el perfilador de Java Script.
• Linea de Comandos: Activa la linea de comandos.
• Buscador: Activa el Buscador.
• Personalizar accesos directos: Te permite personalizar los diferentes accesos directos.

Botón Inspeccionar

Este botón permite inspeccionar cualquier elemento de la página web seleccionada mostrando el código correspondiente con dicho elemento.
En ejemplo hemos seleccionado el logo  de Ayuda Webmaster y vemos como Firebug nos indica la parte del código HTML que pertenece a ese elemento. También nos muestra el CSS aplicado al elemento.

Podemos activar el botón inspeccionar haciendo clic derecho con el ratón.

Botón Editar

Cuando usamos inspeccionar y se ha identificado su linea de código podemos Editar su HTML viendo en tiempo real el cambio en nuestro navegador.
En el ejemplo podemos ver como hemos modificado el titulo “Quitar la barra Blogger (Navbar)”

Ruta del elemento especificado

Cuando usamos inspeccionar y se ha identificado su linea de código, a la derecha de Editar nos aparece la ruta del elemento HTML desde el elemento seleccionado hasta el comienzo del HTML de la página, pudiendo observar de que sección específica de la página se trata al pasar el ratón por encima.
En el ejemplo podemos ver la ruta del título  “Quitar la barra Blogger (Navbar)” y observar como se selecciona la seccion del HTML que ocupa.

Buscador

El Buscador integrado se encuentra a la derecha de Firebug. Nos permite buscar un texto dentro del código fuente.
En el ejemplo hemos buscado “Quitar Barra Blogger” y vemos como Firebug nos lo ha seleccionado en el HTML.

Pestaña Consola

Al principio la pestaña consola estara deshabilitada, así que al principio tendras que habilitarla.

• Módulo Consola : Soporte para loggear en la consola.
• Módulo Script : Soporte para depuración de Javascript.
• Módulo Red : Soporte para monitorizar la red.

Más adelante explicaremos más sobre la consola.

Pestaña HTML

Esta pestaaña está asociada con el elemento Inspeccionar ya que este trabaja sobre la pestaña HTML.
La pestaña HTML muestra la estructura de la página al que podemos cambiar a nuestro gusto editando los ID, CSS etc pero recuerda que todo está emulado y al actualizar se perderán los cambios.
A la derecha muestra el Estilo,Calculado,Plantilla y DOM que se explicaran más adelante.
Si seleccionamos un elemento y hacemos clic derecho se mostraran las siguientes opciones.

• Copiar HTML: Copia el código HTML del elemento seleccionado al portapapeles.
• Copiar innerHTML: Copia el atributo “innerHTML” de elemento seleccionado al portapapeles.
• Copiar Xpath: Copia al portapapeles la expresión que identifica al elemento de manera única.
• Copiar Ruta CSS: Copia al poartapapeles la ruta CSS del elemento seleccionado.
• Registrar evento: Permite registrar un evento asociado al elemento seleccionado.
• Desplazarse hacia la vista: Muestra en la pantalla la página en la que aparece el elemento seleccionado.
• Atributo nuevo: Permite incorporar un atributo nuevo al elemento seleccionado.
• Editar “atributo”: Permite editar un atributo concreto en caso de tenerlo seleccionado.
• Borrar “atributo”: Permite borrar un atributo concreto en caso de tenerlo seleccionado.
• Editar HTML: Misma funcionalidad que el botón Editar.
• Eliminar elemento: Elimina el elemento del código.
• Expandir/Contraer todo: Expande o contrae el HTML que contiene el elemento seleccionado.
• Detener si hay cambios en los atributos: – – -
• Detener si agregan o eliminar subnodos: – – -
  
• Detener si se elimina el elemento: – – –
• Inspeccionar en pestaña DOM : Muestra los datos DOM asociados al elemento seleccionado.

Pestaña CSS

Esta Pestaña muestra el estilo CSS de la página permitiendo navegar por los diferentes estilos. Está asociada con el elemento Inspeccionar para poder encontrar el CSS.

Desde la pestaña CSS se puede editar los selectores, atributos y los valores del estilo. Esta funcionalidad se puede usar también desde la pestaña HTML seleccionando desde Inspencionar el elemento HTML y viendo el CSS.
Cuando seleccionas un selector desde la pestaña CSS y haces clic con el botón derecho se despliegan las siguientes opciones:

• Copiar : Copia el elemento seleccionado al portapapeles.
• Nueva regla: Añade un nuevo selector.
• Nueva Propiedad: Añade un nuevo atributo.
• Editar “propiedad” (Con un elemento de estilo seleccionado) : Permite editar una propiedad concreta en caso de tenerla seleccionada.
• Borrar “propiedad” (Con un elemento de estilo seleccionado) : Permite borrar una propiedad concreta en caso de tenerla seleccionada.
• Deshabilitar propiedad (Con un elemento de estilo seleccionado) : Impide que se aplique sobre la página el resultado de dicha propiedad.
• Refrescar : Permite que se muestren los cambios sobre la página en caso de que todavía no se hayan producido.
• Inspeccionar en pestaña DOM : Muestra los datos DOM asociados al elemento seleccionado.

En el ejemplo vemos como modificamos el color del título “Quitar barra Blogger” que antes era #2222.

Aparte de modificar lo que ya esta definido en el estilo de la página nos permite añadir selectores,atributos y valores. Dispone de un autocompletando tanto como para los atributos y valores CSS y puede previsualizar un color o una imagen tan solo poniendo el ratón encima del valor CSS (color o Imagen)

Pestaña Calculado

La pestaña Calculado se encuentra accesible desde la pestaña HTML en la parte derecha.
Esta pestaña muestra los atributos y valores aplicados sobre un elemento seleccionado diviendolos en categorías Texto, Fondo, Modelo de Caja,Plantilla otro.
Dispone de un filtro para ordenar automáticamente y otro para mostrar atributos específicos de Firefox.

Pestaña Plantilla/Maquetación

Esta pestaña se encuentra accesible desde la pestaña HTML a la derecha de la subpestaña Calculado.
Permite alinear correctamente los elementos sin perder la vida en ello. Muestra los atributos Margin, Border, Padding y la dimensión del elemento. También muestra la posición del elemento y el z.-index de este.

Próximamente ampliaremos la guía con más información.

SHARE

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

• 
• 
• 
• 
•