Herramientas de desarrollo de Mozilla Firefox: Firebug y Web Developer Toolbar

Las bondades del estupendo navegador Mozilla-Firefox es ampliamente conocida. Hoy en día, este navegador cuenta con la aprobación de la mayoría de las personas que se dedican al desarrollo web.

Una de las grandes ventajas que tiene respecto de los demás, es la posibilidad que ofrece a sus usuarios de aumentar sus capacidades mediante la incorporación de extensiones, la mayoría de los cuales son desarrollados bajo licencias no comerciales.

Firebug de Mozilla Firefox: una herramienta indispensable

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.

Descarga e instalación de Firebug

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.

Primeros pasos con Firebug

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 icono 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.

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

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 con Firebug

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.

Web Developer Toolbar de Mozilla Firefox: Casi un editor Wysiwyg

Una de las extensiones más útiles para los desarrolladores de páginas web es Web Developer Toolbar (Barra de Herramientas para Desarrolladores Web), que incorpora una gran cantidad de funciones extra al excelente navegador, hasta casi convertirlo en un editor WYSIWYG.

Herramientas más importantes

Las herramientas que tiene esta extensión sirven para el manejo del navegador y se encuentran divididas en varias categorías, las que pueden verse en los menús emergentes de la barra.

Las funciones para la que está diseñada esta barra son muchas, pero por cuestión de espacio, solo describiremos las más importantes o interesantes desde el punto de vista del diseño de páginas web.

Desactivar elementos con Web developer toolbar

Estos efectos se producen únicamente en la ventana y en la pestaña visible en ese momento y son absolutamente transitorios, por lo que con solo recargar la página, dejarán de tener efecto todas las desactivaciones efectuadas en este menú, volviendo al estado en el que se encontraba configurado el navegador.

Dentro de las funciones se destacan las desactivaciones de Java y Javascript, la desactivación temporal del bloqueo de ventanas emergentes (particularmente útil cuando estamos diseñando una web que tiene este tipo de recursos) y la desactivación de colores.

Esta última función, va mucho más allá, ya que en realidad lo que desactiva es la propiedad “background” del CSS, así que también desaparecerán las imágenes empleadas como fondo. Esta herramienta tiene utilidad cuando nos encontramos distribuyendo los contenidos en el diseño o cuando estamos probando los colores de las fuentes.

Importante: Se debe tener siempre en cuenta, que la desactivación de las medidas de seguridad que tiene el navegador, pueden poner en riesgo al equipo y el software, por lo que no se recomienda el uso de este tipo de herramientas mientras se encuentra navegando en internet, excepto que se trate de sitios muy seguros.

CSS y estilos

Cuando se desactivan todas, el navegador recarga la página sin leer el archivo CSS o la parte del código HTML que contiene elementos de estilo.

Dentro de estas herramientas también se encuentra una que permite la visualización del código CSS en una pestaña nueva; es de destacar que los códigos mostrados en este modo son de solo lectura, por lo que no se puede editar el código empleando esta función.

Las dos herramientas que describiremos a continuación, son algunas de las más importantes. La primera, es la de “añadir hoja personal”.

Cuando se selecciona esta herramienta, se abre un cuadro “Abrir” que nos permite seleccionar un archivo CSS de nuestro ordenador, tras lo cual el navegador incorporará aquellas líneas del código que pueda aplicar en la página que está mostrando.

Veamos un ejemplo práctico: mediante el empleo del block de notas, introduciremos el siguiente código:

body {
padding: 0;
font: 3em arial, helvetica, sans-serif;
}

Tras escribirlo, guardaremos el archivo como “estilo.css”, “style.css” o cualquier otra cosa que se nos ocurra.

Luego, le pediremos al navegador que incorpore esta hoja de estilos a una página web cualquiera, tras lo cual, en el ejemplo ya dado, como resultado obtendremos un cambio en la tipografía y una fuente de 3em.

El resultado de las dos formas de ver el archivo HTML son las siguientes:

Luego de creado el archivo CSS, podremos buscar una página cualquiera e incorporarle temporalmente (solo en el navegador) el mencionado archivo para ver los cambios efectuados.

La otra herramienta importante (y aquí puede apreciarse claramente que casi se comporta como un editor) es la que permite editar el código CSS, tanto si la página se encuentra en nuestro ordenador como si es una página que se encuentra en la web (esto es posible porque el código que lee el navegador lo “descarga” y se encuentra temporalmente en el ordenador del usuario).

Cuando seleccionamos esta herramienta, se abre el siguiente cuadro, que permite la edición del código del o de los archivos CSS de la página que se encuentra visible:

En esta ventana, el código puede editarse “manualmente”, mientras se van viendo los resultados en la ventana del navegador que quedará situada a la derecha. Los cambios pueden verse en cuanto se guarden los cambios que se han efectuado.

Herramientas de formularios

Cuando la página cuenta con elementos de formulario, la barra de herramientas para desarrolladores de Mozilla Firefox permite realizar varias funciones con ellos.

Por ejemplo, cuando se selecciona “mostrar detalles del formulario”, los elementos de formulario que se encuentran en la página aparecen resaltados con un borde rojo, y se muestran unas etiquetas de color amarillo que contienen las líneas de código relacionados con los mismos.

Otra herramienta permite ver las contraseñas mientras se escriben, sustituyendo los símbolos por los caracteres. Una herramienta importante es la que permite ver la información de los formularios de la página.

Cuando se selecciona, se abre una pestaña del navegador que muestra un listado completo de los formularios que se encuentran en la misma, los elementos que los componen y sus características. La siguiente captura de pantalla permite ver dicho listado:

Otra de las herramientas que se puede encontrar en este menú es la que posibilita la eliminación de la restricción de caracteres, es decir, que en aquellos formularios donde solo se permiten números, letras, una combinación de ambos, o cualquier otra restricción, ésta es bloqueada, permitiendo el uso de cualquier tipo de caracteres en forma transitoria.

Esto solo es válido dentro del propio navegador, ya que las restricciones establecidas a través del servidor quedan activas.

Existen otras herramientas menores dentro de este menú de formularios, como borrar radios, habilitar autocompletado, permitir escribir en campos, etc., que pueden ser útiles tanto a la hora de llevar adelante el desarrollo de un sitio web como para funciones propias de la navegación por internet.