Extensiones para desarrolladores web en Firefox

Aparte de ser un navegador web más seguro que MSIE, Firefox está también mejor diseñado para usuarios de todo tipo. Las extensiones que se pueden añadir a la aplicación, según gustos y necesidades de cada cual, le dan a este navegador la potencia necesaria para desmarcarse, por ahora, claramente del resto.

En la página oficial de la fundación Mozilla, podeis encontrar una interminable lista de extensiones, plugins y temas para personalizar Firefox.

En este artículo, voy a enumerar algunas extensiones que pueden ser de gran ayuda para el desarrollo de páginas y aplicaciones web. Si conoceis alguna más, no dudeis en comentarla.

Web Developer Toolbar

Tal vez sea la extensión más conocida y más completa. Con ella se pueden realizar multitud de acciones como:

• deshabilitar la caché, las cookies, las imágenes, java, javascript, los colores de la página, las hojas de estilos, ...,
• añadir hojas de estilos de usuario, ver todos los archivos CSS de una determinada página, cambiar el modelo de cuadro entre el usado por el motor de Mozilla, Gecko, y el usado por Internet Explorer; ver los estilos aplicados a un elemento de una página, poder cambiar entre los diferentes estilos de los medios utilizados (handheld, screen, print), incluso editar los estilos de una página desde el propio navegador,
• ver sobreimpresionado en un formulario el código HTML que lo construye (para poder ver campos ocultos en la propia página, por ejemplo), ver el contenido de campos de tipo password (transforma los asteriscos en texto en claro), quitar longitudes máximas a los campos de texto, mostrar información detallada de los formularios (todos los elementos con todos los valores de sus atributos),
• mostrar las dimensiones y tamaños (y hasta las rutas) de las imágenes (de los elementos img, no de las usadas como fondo en las hojas de estilos), deshabilitar imágenes (incluso las de fondo) o hacerlas invisibles, ...,
• ver información sobre la página: teclas de acceso rápido (access keys), identificadores y clases de los elementos de la página, tamaños de los elementos de bloque (aquellos que son contenedores de otros elementos), valores de los atributos href de los enlaces, cookies, javascript, listado de enlaces, cabeceras HTTP de respuesta,
• limpiar la caché, el historial, las cookies; ver los comentarios de una página; marcar todos los enlaces como visitados o no visitados (y probar fácilmente los estilos de cada estado); enlaces para consultar las especificaciones del W3C, ...

La lista de funciones todavía es más larga, pero con esta muestra podeis daros cuenta de su gran utilidad.

HTML Validator

Una forma bastante cómoda de saber si seguimos los estándares del HTML es instalar esta extensión. Podremos ver al instante si la página es válida según el DOCTYPE que hayamos elegido. Marca tanto los errores graves como los avisos. También es posible verificar si cumplimos los diferentes niveles de accesibilidad.

Además, esta herramienta nos da la posibilidad de limpiar y corregir el código HTML, gracias a que está basada en Tidy.

FatWeb

Tras instalar esta utilidad, en la barra de estado del navegador podremos ver tanto el número de archivos que componen la página actual (archivos CSS, JavaScript, imágenes y la propia página HTML), como los bytes que suman entre todos ellos. En una ventana auxiliar, que se mostrará si hacemos click sobre la parte de la barra de estado que ocupa, aparecen en forma de resumen, los tamaños de cada uno de los ficheros.

También proporciona información sobre el tiempo estimado que costaría descargar esa cantidad de bytes con una conexión lenta (56 Kb) y una rápida (1.5 Mb).

Live HTTP Headers

Este visor de cabeceras HTTP puede ser muy útil en cuanto estamos trabajando contra servidores web. Podremos seguir todo el tráfico del protocolo HTTP generado por nuestras peticiones y las respuestas del servidor. Incluso se pueden ver los datos pasados vía POST en los formularios.

Header Monitor

Si tenemos instalada la extensión Live HTTP Headers, también podremos ver en acción a esta otra. Es menos potente que la anterior, pero tiene una ventaja: el contenido de la directiva HTTP que decidamos controlar aparece en la barra de estado del navegador, sin necesidad de abrir una ventana auxiliar.

Tamper Data

Permite ver y modificar las cabeceras HTTP. Puede capturar las peticiones de cada página y alterar los valores de las cabeceras antes de mandarlas al servidor.

User Agent Switcher

Puede ser interesante ver como se muestran algunas páginas según nos identifiquemos con un navegador u otro. Esta utilidad sirve para cambiar la identificación del explorador web. Por defecto viene con algunos definidos, como Internet Explorer 6, Opera 7.54 y NetScape 4.8, pero lo interesante es poder definir cuantas identificaciones queramos.

LinkChecker

Como su nombre indica, sirve para verificar si todos los enlaces de una página van a algún sitio. Conforme vaya analizando los enlaces, veremos como los va poniendo de un color diferente al que tenían en un principio: verde si es correcto, rojo si es inválido, amarillo si se requieren credenciales para seguir el enlace y gris si no ha sido analizado. Una vez que haya terminado, si nos ponemos encima de cada enlace, nos dirá si el enlace es válido o no, si no lo ha analizado por apuntar a una cuenta de correo o contener código javascript (práctica esta que debemos evitar siempre). Si algún enlace no es sintácticamente correcto, es posible que la herramienta se pare y deje de analizar, pero no será muy difícil localizar el enlace conflictivo: el siguiente enlace al último coloreado.

Inspector Widget

Añade una opción en el menú contextual para acceder al inspector DOM que viene en Firefox.

MeasureIt

Sirve para medir zonas de la página en píxeles, tanto la altura como la altura. Como inconvenientes diré que he sido incapaz de redimensionar una zona creada con esta herramienta. No sé si es que no se puede o es que todavía no la sé manejar adecuadamente. Tampoco he sabido como tener más de una zona definida al mismo tiempo.

Checky

Para que no se nos olvide ningún elemento ni ninguna prueba a la hora de validar una página: HTML, CSS, RDF, RSS, WAI/508, enlaces, navegador lynx online, ... Casi todas las herramientas existentes en Internet para validar contenidos están recogidas en esta extensión, y están a un sólo click de distancia.

TAW3

TAW son las siglas de Test de Accesibilidad Web. Pulsando sobre el botón que añade en la barra de estado de Firefox, tendremos la posibilidad de verificar si seguimos las pautas de accesibilidad (niveles 1, 2 y 3). El validador online al que se conecta es www.tawdis.net.

Fangs

¿Cómo saber si los usuarios que utilizan lectores de pantalla ven exactamente el contenido tal y como queremos que lo lean? Esta interesante utilidad viene a solucionar nuestras dudas. En una ventana auxiliar nos mostrará la forma en que un lector de páginas web mostrará la información al usuario. Las herramientas de validación de accesibilidad no aseguran que los contenidos sean realmente accesibles, pero esta herramienta puede ayudarnos, y mucho, a conseguir ese objetivo.

wmlbrowser

Ya no hace falta otra herramienta para visualizar contenido WML. Si desarrollamos páginas para dispositivos móviles con Firefox y esta extensión es más que suficiente.

Dublin Core Viewer

Muestra los metadatos que hay en formato Dublin Core en los elementos de cabecera meta y link.

ColorZilla

Con esta herramienta podremos conseguir los colores de una página y hacer nuestra propia paleta personal. El color capturado es mostrado en formato RGB decimal y hexadecimal, y en formato HSV.

Lleva predefinidas paletas de colores web seguros, colores con nombre, colores del sistema..., además de la posibilidad de añadir más.