Manual de HTML y CSS

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

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando...

Explicamos como usar las mejores herramientas de desarrollo de Firefox: Firebug que se encuentra dentro de las herramientas indispensables para el desarrollo web. Y Web Developer Toolbar, que es una extensión diseñada para brindar herramienta de apoyo a los desarrolladores.

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

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

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

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.

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

Este menú presenta todas las herramientas que permiten activar y desactivar scripts o partes del código fuente de la página web que se encuentra en pantalla.

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

Esta herramienta permite desactivar las hojas de estilo en cascada, ya sean todas o algunas en particular.

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:

Páginas con estilo propio

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:

Editor CSS

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:

Detalles de formularios

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.

4 respuestas

  1. Yo tenía el mismo problema y revisando la web del desarrollador señala:

    1) Haga clic en la barra de herramientas y seleccione “Personalizar …’.
    2) Pulsar en “Valores por defecto’ y aceptar.

    Con eso he conseguido mostrarla en mi firefox.

  2. Melchor te aparece en el Menu de Herramientas la opcion de Web Developer… intenta actualizando la ultima version de Firefox.

  3. He instalado y desinstalado dos veces web developer
    El componente aparece como instalado pero no hay TOOLBAR
    He desinstalado firefox, lo he vuelto a cargar y luego el componente.
    Misma cosa, hay componente pero no hay barra para activar ni emergente.

    Ninguna informacion en ninguna pagina sobre esto.
    Normal?

    1. Melchor, sinceramente no sé a que se debe tu problema, no puedo ayudarte en este caso, tal vez alguien que esté leyendo esto sabe la solución.

Deja una respuesta