Extensiones de Firefox útiles para desarrolladores del web

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

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

fjtorres

29/11/2005
Web Developer, una extensión muy completa e ideal para webmasters que desarrollen bajo los estandards de W3C.

edgar

08/12/2005
Que me dices de esta:
Web Developer [https://addons.mozilla.org/extensions/moreinfo.php?id=60&application=firefox]

una verdadera maravilla para un webmaster.

Valdhir

09/12/2005
Hola, os habeis dejado una de las extensiones más útiles para el desarrollador web. Es la "Web Developer". Con ella se puede hacer practicamente todo lo que podamos imaginar. Modificar CSS, mostraren diferentes colores para los diferentes elementos o bloques de una página, alternar entre archivos de estilo, y mucho más.

Lo mejor es mirarsela.
<a href="https://addons.mozilla.org/extensions/moreinfo.php?id=60">Web Developer - Firefox Extension</a>

Sebastián Thüer

09/12/2005
Me parece muy interesante el artículo aunque creo que falta una de las extensiones más interesantes y que contiene muchas de las funcionalidades comentadas: Web Developer Toolbar de Chris Pederick.

Se puede descargar desde aquí:
http://chrispederick.com/work/webdeveloper/

He publicado un artículo a respecto en mi blog:
http://www.thuer.com.ar/blog/2005/web-developer-toolbar/

Guillermo

09/12/2005
Hola, creo que una extension que es infaltable, es la web developer. Pone una barra con muchas funciones, algunas tan utiles que se vuelven imprescindibles. No duden en probar, sin duda van a coincidit conmigo.
Saludos

Guillermo

David

22/12/2005
Quizas una hecha por desarrolladores del mundo hispano no venga mal a la lista:

http://posicionamientobuscadores.developers4web.com/toolbar-posicionamiento-web

ZeroKilled

02/8/2007
hay otra herramienta que considero muy buena para depurar, se llama Firebug. en mi opinion es una herramienta algo distinto de lo que es WebDeveloper, pero al mismo tiempo, de la misma categoria y potencial.

julian

24/2/2009
Firebug reúne muchas de las funcionalidades de estos componentes

German

10/6/2009
Codigo fuente
soy novato, he creado una pag web que con internet explorer funciona perfectamente, con los demas navegadores abre la pag. principal pero luego no deja abrir los enlaces, me han dicho que es del codigo fuente, pero no se como solucionarlo. ¿que tengo que hacer para que mi web se pueda abrir desde todos los navegadores? Si teneis una solucion por favor envíar un correo a ajedrezvaranda@gmail.com