> Manuales > Extensiones de Firefox

Algunas extensiones del conocido navegador Firefox son muy útiles para desarrollar webs. Facilitan la tarea del programador o diseñador y ofrecen ayudas para depurar el código.

Es de sobra conocido el programa Firefox, un digno competidor de la guerra entre navegadores, lo que no son tan conocidas son algunas de sus extensiones, que pueden resultar de mucha utilidad en nuestro día a día como desarrolladores web.

Firefox tiene una ventana especial (en el menú Herramientas - Extensiones) para gestionar las extensiones que tenemos instaladas en el sistema: actualizarlas, desinstalarlas o configurar las opciones de cada extensión. Por lo cual será sencillo trabajar con ellas, decidir cuáles nos interesan y solucionar problemas si alguna extensión no funciona correctamente.

Nota: para que una extensión recién instalada empiece a funcionar hay que reiniciar Firefox. Es decir, cerrar todas las ventanas abiertas del navegador y volver a abrirlo.

Se puede encontrar información sobre todas las extensiones disponibles para Firefox en https://addons.mozilla.org/extensions/?application=firefox

Extensiones de Firefox para desarrolladores

Existen extensiones de todo tipo, como bloquear scripts, optimizar la velocidad, bloquear anuncios, editar el CSS de una página, ver la página por la que estás navegando con Internet Explorer, validar un documento, etc. Como se puede ver, hay de todo tipo, pero nos vamos a centrar en ofrecer algunas notas sobre extensiones útiles para desarrolladores.

EditCSS
Una extensión para alterar el estilo CSS de cualquier página web y visualizar los resultados inmediatamente. Crea un nuevo panel lateral (se accede a través del menú Ver - Panel lateral - Edit CSS) donde se listan los estilos del documento actual y permite editarlos.

HTML Validator
Para incluir una herramienta de validación del HTML en Firefox. Muestra el número de errores en una página en un icono en la barra de estado. Además, cuando se visualiza el código fuente se obtiene una descripción de los errores. Se supone también que se resaltan los errores en el código fuente, pero esa posibilidad parece no funcionar en mi sistema.

ViewSourceWith
Permite ver el código fuente de una página web con cualquier editor que tengamos instalado en nuestro ordenador. Es muy útil para ver rápidamente un código generado con un lenguaje de programación del lado del servidor en el editor con el que estemos acostumbrados a trabajar. También se puede pulsar con el botón derecho sobre una imagen y utilizar esta extensión para abrirla con un editor de imágenes (pero si la imagen enlaza con una página se intenta ver el código fuente de la página enlazada). Para poder utilizar un editor externo previamente tenemos que darlo de alta en la pantalla de configuración de la extensión.

View formatted source
Muestra el código fuente de una página, pero le aplica un formato sencillo, a base de tabulaciones y colores, para que resulte más sencillo de leer. Crea una opción en el menú contextual que nos da un par de posibilidades para ver el código fuente: de todo el documento, o por partes, seleccionando el área en la página de la que queremos ver su código.

View Rendered Source Chart
Muestra de manera más visual el código de una página, tabulando y agrupando los distintos elementos, a los que también se le aplica un color de fondo para diferenciarlos visualmente.

IE Tab
Permite abrir una página con el motor de Internet Explorer, pero permaneciendo en Firefox. Tiene varias opciones configurables, como páginas que siempre se abrirán con Explorer, que se abra una nueva pestaña siempre para mostrar la página con IExplorer, etc.

ColorZilla
Es una herramienta que permite seleccionar el color de cualquier punto de la página web. Se pone un icono de un cuentagotas en la barra de estado. Si pulsamos sobre el icono se nos permite seleccionar un color de la página. Luego, con el color seleccionado, si pulsamos con el botón derecho del ratón, podemos realizar varias acciones, como copiar el color al portapapeles.

MeasureIt
Sirve para medir áreas de la página, es decir, su altura y su anchura. Crea un icono en la barra de estado que, al pulsarlo, nos permite hacer una selección dentro de la página web. Con ello se resalta el área que hemos seleccionado y nos indica su ancho y alto.

En fin... como se puede haber comprobado, hay bastantes posibilidades de ampliación de Firefox que seguro que resultan muy útiles para las personas que nos pasamos el día programando o diseñando páginas web.

En otros artículos se podrán explicar nuevas extensiones de interés. No obstante, recordamos que todos los añadidos posibles para Firefox se encuentran en https://addons.mozilla.org/extensions/?application=firefox

Tenemos un Manual de Extensiones de Firefox con más información de interés.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual