Extensiones Firefox para desarrollo web

Extensiones Firefox para desarrollo web

En varias ocaciones hemos hablado sobre extensiones para FIrefox que nos facilitan el trabajo a los que desarrollamos para la web. Todas estas extensiones y algunas otras más que descubrí recientemente, son la que integran esta recopilación.

Firebug

Firebug es un clásico y también una de las extensiones para desarrollo más usadas. Con ésta podemos trabajar con HTML, CSS, DOM, etc.

Descargar: getfirebug.com

FirePHP

FirePHP integra en Firebug, unas completas herramientas para desarrollar en PHP.

Descargar: www.firephp.org

CodeBurner for Firebug

A la tradicional ventana de FireBug, agrega una nueva pestaña Referencia, desde ésta se pueden obtener automáticamente y también buscar referencias sobre CSS y elementos y atributos HTML.

Descargar: addons.mozilla.org/en-US/firefox/addon/10273?src=reco

View Source Chart

View Source Chart muestra gráficamente las etiquetas HTML y la sestructuras anidadas.

Descargar: addons.mozilla.org/en-US/firefox/addon/655

HTML Validator

HTML Validator permite validar código HTML sin tener que cargar el validador online de la W3C además de ofrece otras funciones.

Descargar: addons.mozilla.org/en-US/firefox/addon/249

Web Developer

Web Developer agrega un menú y una barra de herramientas con varias herramientas para desarrollo Web.

Descargar: addons.mozilla.org/en-US/firefox/addon/60

IE Tab

IE Tab permite a los desarrolladores que trabajan en Windows, cargar en una pestaña una página en Internet Explorer. Otra extensión clásica para desarolladores que utilizan FIrefox.

Descargar: ietab.mozdev.org

XML Developer Toolbar

XML Developer Toolbar es una barra que permite generar: Schema, DTD, validación Schema y mucho más.

Descargar: https://addons.mozilla.org/es-ES/firefox/addon/2897

Server Switcher

Server Swicher es una herramienta de ayuda a los desarrollares web ya que permite muy fácilmente cambiar entre servidores durante.

Descargar: addons.mozilla.org/es-ES/firefox/addon/2409

View Dependencies

View Dependencies agrega una pestaña (tab) a la ventana Información de página en la cual lista todos los archivos que fueron cargados en la página actual.

Descargar: addons.mozilla.org/en-US/firefox/addon/2214

ViewSourceWith

ViewSourceWith permite visualizar el código fuente de una página en un editor externo.

Descargar: addons.mozilla.org/en-US/firefox/addon/394

JavaScript Debugger

JavaScript Debugger es un plugin Firefox para depurar código Javascript; éste suministra un completo entorno que permite entre otras cosas, ejecutar código línea por línea, imprimirlo, etc.

Descargar: addons.mozilla.org/en-US/firefox/addon/216?src=reco

DOM Inspector

Es un plugin Firefox para inspeccionar y editar el DOM (Document Object Model) de una página HTML.

Descargar: addons.mozilla.org/en-US/firefox/addon/6622?src=reco

Yslow

Yslow llega de la mano de Yahoo y permite ver los tiempos de carga de los componentes de una página web.

Descargar: developer.yahoo.com/yslow

Web Developer

Web Developer ofrece herramientas de edición de código y más.

Descargar: chrispederick.com/work/web-developer

Aadvark

Aadvark permite realizar tareas de edición de código con tan sólo un clic.

Descargar: karmatics.com/aardvark

View Dependencies

View Dependencieses un plugin Firefox que agrega una pestaña a la venta de información de una página HTML, muestra las rutas de los archivos de la página agrupados por CSS, Javascript, imágenes, etc.

Descargar: addons.mozilla.org/en-US/firefox/addon/2214?src=reco

Web Developer Toolbar

Web Developer Toolbar es una herramienta para desarrolladores con la que se pueden activar/desactivar Java/Javascript, redirecciones, etc.; borrar/desactivar cookies; y muchas otras funciones similares para CSS, formualrios HTML, imágenes, código fuente y un largo etc.

Descargar: addons.mozilla.org/en-US/firefox/addon/60

X-Ray

X-Ray, una extensión para Firefox cuyo objetivo es mostrar las etiquetas del (X)HTML de un página web cargada en el navegador. Con sólo desplegar el menú contextual y seleccionar en la parte superior X-Ray, esta mostrará superpuesta en la página cargada , tolas las etiquetas del (X)HTML que la componen.

Descargar: addons.mozilla.org/es-ES/firefox/addon/1802

Extras –  Extensiones para esarrolladores/diseñadores

ColorZilla

ColorZilla provee herramientas para trabajar con colores como por ejemplo, ofrece entre algunas otras utilidades, un capturador de color.

Descargar: www.colorzilla.com/firefox

GridFox

GridFox superpone un regilla para poder ubicar lso obejtos, ideal para los que trabajan con framework CSS como BluePrint.

Descargar: www.puidokas.com/portfolio/gridfox

+Info: GridFox – Extensión Firefox que superpone una regilla

MeasureIt

MeasureIt permite medir objetos en la pantalla del navedador.

Descargar: www.kevinfreitas.net/extensions

+Info: 4 Herramientas para tomar mediciones en el monitor

Window Resizer

Window Resizer permite simular la visualización de una página en web en distintas resoluciones.

Descargar: addons.mozilla.org/en-US/firefox/addon/1985

¿Cuál es tu favorita? ¿Usas alguna otra extensión?

Por Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer. Blogger desde el 2006, creador de Pixelco Tech. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT