Herramientas para desarrolladores web: extensiones de firefox

Muchas de las extensiones del conocido navegador Firefox son muy útiles para el desarrollo de página web. Facilitan la tarea del programador o diseñador y ofrecen ayudas para la depuración de código.

No vamos a descubrir ahora el programa Firefox, el segundo navegador más utilizado por los internautas, 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 diseñadores 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.

Para más información de las extensiones para Firefox pueden visitar el siguiente link: https://addons.mozilla.org/extensions/?application=firefox

Extensiones de Firefox para Diseñadores Web.

Existen extensiones de todo tipo, como bloquear scripts, optimizar la velocidad, bloquear anuncios, visionar el tiempo de tu ciudad, scripts para twitter, para facebook, para myspace, 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
Nos ayuda a cambiar el estilo CSS de cualquier página web y visualizar los resultados instantáneamente. 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.

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.

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

¿qué extensiones utilizas tú?..