comparte el articulo 

Firebug de Mozilla-Firefox: una herramienta indispensable

Actualizado el 04/10/2013 < > 0 Comentarios

Resumen: Es casi unánime la opinión de los diseñadores web con experiencia de que Firebug se encuentra dentro de las herramientas indispensables para el desarrollo de páginas web.

Además de crear páginas web nuevas, las personas que se introducen en el mundo del desarrollo web deben saber realizar modificaciones a páginas ya creadas, tanto las que han sido creadas por el propio desarrollador como las de otros. Puede ser necesario que realicemos modificaciones en una página web para actualizarla, introducir nuevos elementos, o simplemente porque deseamos que tenga otro aspecto. Del mismo modo, las empresas y particulares que tienen páginas web pueden requerir los servicios de un diseñador por los mismos motivos.

Pero entrar en un código que no fue creado por nosotros, o que hace mucho tiempo que hemos creado puede resultar una tarea realmente engorrosa. Localizar los elementos que la componen e identificar las propiedades CSS que rigen su aspecto, pueden requerir un esfuerzo grande y mucho tiempo, lo que puede hacer que realizar este tipo de tareas sea poco económico.

Sin embargo, existen algunas herramientas que pueden facilitar enormemente esta tarea. Tal es el caso de un complemento para Mozilla-Firefox llamado “Firebug”, y que cumple una serie de funciones que son de gran utilidad, a tal punto que a pesar de que se trata de una herramienta útil solo para diseñadores web, se trata de uno de los complementos más descargados.

Además de inspeccionar códigos, también es posible realizar la edición de los mismos, por lo que, complementado con un editor de texto o editor HTML, puede hacer que la tarea de crear páginas web sea mucho más sencilla.

Descarga e instalación

Los que utilizamos Mozilla-Firefox (tanto como navegador principal como de pruebas) sabemos que agregar complementos es una tarea realmente sencilla, pero como es posible que alguien no lo sepa, daremos unas breves instrucciones acerca de cómo descargar e instalar este complemento.

La descarga de complementos se hace a través de “Herramientas/Complementos”, con lo que se abre una ventana en la que aparece una lista de complementos recomendados y un enlace que dirige a la página web de Firefox donde se listan todos los complementos. La descarga e instalación se hace en forma automática, tras lo cual se solicitará que se reinicie Firefox para que el complemento quede activado. Es importante recordar que cuando se reinicie Firefox, las pestañas que estaban abiertas volverán a aparecer, al igual que las páginas que teníamos cargadas al momento de reiniciar.

Localización

Una vez instalado y activado, Firebug puede ponerse en acción a través de dos métodos. El primero, es haciendo clic en “Herramientas/Firebug”, donde tendremos una serie de opciones que posteriormente describiremos. Otra forma de abrir el Firebug, es haciendo clic en el ícono que se encuentra en la parte inferior derecha de la ventana del navegador, que abrirá Firebug en la forma que lo tendremos como predeterminado.

Utilizando la primer forma de abrir Firebug, podremos optar por abrirlo dentro de la misma ventana, en ventana aparte (pero con referencia a la página que se encuentra abierta) o con un editor externo, que previamente debe estar configurado. Cuando hacemos uso de esta última opción, se abrirá el editor (por ejemplo, Dreamweaver) con el archivo HTML  de la página.

Si se abre utilizando la opción de abrirlo en la misma ventana, aparecerá una barra en la parte inferior, que al arrastrarla hacia arriba aumentará de tamaño permitiendo ver todas las herramientas que dispone y mostrando el código HTML de la página. Haciendo clic en el botón correspondiente, se abrirá el archivo CSS o JavaScript ligados a la página.

En lo personal, la mejor opción es abrir en ventana aparte, ya que no se reduce el espacio visible de la página, y solo deberemos desplazarnos entre las ventanas abiertas para cambiar de la vista de la página a la vista de Firebug.

Ventana de Firebug

Inspector de elementos

Haciendo clic en el segundo ícono de la barra de herramientas que aparece en la ventana, cuando pasamos el puntero por diferentes partes de la página que estamos inspeccionando, veremos como los diferentes elementos aparecen enmarcados en un recuadro azul, lo que nos permite visualizar las dimensiones y como se encuentra ubicado respecto de los demás elementos. Si hacemos clic sobre uno de los elementos, en la ventana Firebug se seleccionará la parte del código HTML correspondiente al elemento, además de permitirnos ver en la parte superior, todos los elementos padres e hijos del mismo.

Alternando HTML y CSS

Gracias a las pestañas que aparecen en la barra de herramientas de Firebug, podremos alternar entre las vistas de los códigos HTML y CSS, tanto en forma general cuando no tenemos ningún elemento seleccionado como de los elementos particulares que hayamos seleccionado.

La ventana de Firebug aparece dividida cuando se muestra el código HTML. A la derecha, aparece el código  CSS que afecta al elemento seleccionado. Si cambiamos la pestaña en esta vista y hacemos clic en “interpretado”, veremos todas las propiedades CSS del elemento, estén declaradas o no (si no están declaradas, es porque tienen un valor por defecto o heredado, y en ambos casos, el valor es mostrado).

La siguiente pestaña contiene los elementos propios de la maquetación, con un diagrama de las propiedades, es decir, las dimensiones, el relleno (padding), el borde y los márgenes, todos con las dimensiones correspondientes.

Edición

Una de las características más notables de Firebug es que permite la modificación de la página web que se está inspeccionando. Esto es en forma transitoria, como es de suponerse, ya que la modificación se hace sobre los archivos guardados en las carpetas temporales del navegador, volviendo la página a su aspecto normal en cuanto se recargue la misma.

Haciendo modificaciones en los archivos, podremos ver como quedan las páginas web modificando algunas de las propiedades CSS, cambiando los elementos del código HTML, etc. Para aquellos que se encuentran aprendiendo a diseñar páginas web, es una de las mejores formas de comprender como funcionan muchas de las etiquetas HTML y las propiedades CSS. Y también puede resultar muy divertido.

Cuando la edición se hace sobre una página que está alojada en nuestro ordenador, la edición se hace en forma permanente, por lo que puede utilizarse como editor para los archivos que estemos creando.

Utilizando el editor

Como hemos visto, también es posible abrir la página utilizando nuestro editor de preferencia, lo que permite hacer las modificaciones que hemos explicado anteriormente sobre las páginas que estemos diseñando. Es particularmente útil para aquellos que no utilizan editores WYSIWYG, ya que Firebug les proporciona las funcionalidades que no tienen los editores simples.

Complementos para Firebug

Pero por si esto fuera poco, existe una gran cantidad de complementos para el propio Firebug. En realidad son complementos de Mozilla Firefox, que agregan funcionalidades extra al propio Firebug cuando este se encuentra abierto. Algunos ejemplos son:

  • Firefinder: Permite una rápida localización de elementos HTML dentro de la página.
  • FireQuery: Complemento que sirve para añadir JQuery a las páginas, además de localizar los elementos del HTML que intervienen en los eventos JQuery.
  • FirePHP: Permite trabajar con PHP y AJAX.
  • FireCookie: Muy útil. Permite gestionar y hasta crear cookies, de forma que se puedan poner a prueba las aplicaciones que nos encontremos creando. Para diseñadores avanzados.
  • CSS Usage: Mejora notablemente la vista de las propiedades CSS de los elementos seleccionados. Permite una rápida y sencilla depuración de los archivos CSS.
  • Firepicker: Da el color en hexadecimales de un punto seleccionado de la página.
  • Firediff: Muestra un historial de los cambios que vamos realizando sobre los diseños, y permite volver atrás en los mismos.

Publicado el 13/12/2010, última actualización 04/10/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras