Exodica Blog Otro blog de esos….

11 Extensiones de Firefox para desarrollo web

Bueno, hace mucho que no escribo nada asi que voy a hacer un post útil, jeje comentandoles sobre 11 extensiones para Firefox que nos pueden hacer mas fácil la vida a la hora de desarrollar paginas webs

No es un Ranking, no esta ordenada por nada en especial.

FireBug

La extensión FireBug es sin dudas la mejor e infaltable para cualquier programador o maquetador web, usando el DOM de Firefox, tiene una consola JavaScript super mejorada, opciones para ver el maquetado, jugar con los elementos, los estilos, los CSS y ver peticiones Ajax (HttpRequest), modificar el DOM o los estilos en tiempo real y muchas mas.
Ademas incluye herramientas como el objeto "console" para poder interactuar con esta mediante el JS de nuestra pagina, al estilo:

console.log ('Mensaje para ver en la consola del Firebug');

YSlow

YSlow es una herramienta creada por Steve Souders, el cual trabaja en Yahoo y es encargado de mantener óptimo el rendimiento de este, esta extensión no anda sola, sino que es un plugin para FireBug, y observa, según Microsiervos 13 principios para verificar el rendimiento de carga de una web:

1. Reducir el número de peticiones HTTP
2. Usar una Red de Distribución de Contenidos (CDN)
3. Añadir la cabecera «Expires»
4. Comprimir con Gzip los componentes
5. Poner los CSS al principio
6. Mover los scripts al final
7. Evitar las Expresiones CSS
8. Hacer que los JavaScripts y CSS sean externos
9. Reducir las búsquedas en los DNS
10. Minificar los scripts de JavaScript
11. Evitar redirecciones
12. Eliminar scripts duplicados
13. Configurar los ETags

FirePHP

No es nada creativo, FirePHP es una de extensiones que alguien la tenía que hacer algún día, su objetivo es poder logear en la consola de FireBug (otro plugin para esta extensión) desde PHP usando funciones y el Output Bufering de PHP, de este modo poder observar mientras se carga una pagina mensajes de error, advertencia o avisos desde esta consola, haciendo uso de una api que ofrese tanto para PHP 4 como para PHP 5.

FireCookie

FireCookie, como supondran otro plugin para FireBug (¿qué, todabía no te convences de instalarla?). Esta extensión agrega la capacidad al FireBug de poder ver las cookies que se van grabando desde el servidor o JavaScript.

ColorZilla

ColorZilla es una comodidad que nos pondrá un ícono en la barra de estado, con el típico gotero de tinta que nos dejará seleccionar un color y haciendo click derecho nos dejará copiar el código de color en bastantes formas.

HttpFox

HttpFox es una extensión cuya única función es mostrar todas las peticiones que realize el Firefox, ya sea por HttpRequest, extensiones actualizando info, url ingresadas a mano, etc. Esta puede sernos muy útil para los que tengan que trabajar con Flash, ya que podran ver lo enviado y recibido, cosa que con el FireBug no se puede. Como muestra TODAS las conexiones, es recomendable tener todas las pestañas cerradas cuando sea necesario usarla a si no nos confunde el trafico de gmail por ejemplo.

MeasureIt

Measureit será mas útil para maquetadores y diseñadores, pero nunca estará de mas para esos pequeños retoques que aveces nos toca hacer a los programadores, esta nos dejará calcular el tamaño de algo solo haciendole click y encudrando lo que queremos, de una forma muy fácil y práctica.

ScreenGrab

Aunque ScreenGrab no sea una herramienta de desarrollo, la incluyo por que es realmente útil, para Beta Testers o clientes enfurecidos, o para presentar una web a un cliente ansioso .
Nos permite guardar una página en JPG o PNG, con opciones como "pagina completa", "hasta donde se ve en la ventana" y un par mas, útil para mandar errores y demas.

Web Developer (antes WebDeveloper ToolBar)

WebDeveloper es una barra con funciones útiles de rapido acceso, con las que se pueden por ejemplo desabilitar o borras las cookies, no mostrar imágenes, colorear bloques y/o tablas y muchas mas, tambien tiene una función muy útil que es cambiar el tamaño de la ventana a resoluciónes fijas tipo "800x600", "1024x768", etc. Que obviamente pueden ser configuradas.

Hack Bar

La Hackbar es una herramienta para probar vulnerabilidades XSS entr otras en un sitio web, tiene opciones como poder manipular el data enviada por post, el recorte de urls, y demás para probar la seguridad de cada parte de nuestro sitio.

Lori (Life Of Request Info)

Lori es una extensión muy simple que nos pone en la bara de estado del Firefox 4 datos relevantes en la carga de una pagina web:

• Tiempo de respuesta y quiere decir , tiempo en el que el servidor tarda en empezar a transmitir el primer byte, esto importante de saber si la lógica esta separada de la vista, podemos deducir entonces si la lógica tarda mucho o la vista esta muy cargada.
• Tiempo total de carga, el tiempo total que tardó la pagina en cargarse, con esto desabilitando la cache (usando la WebDeveloper), se puede saber masomenos cuánto tarda una página en cargarse en su totalidad con imágenes, archivos extras y todo.
• Tamaño total de la pagina, mas las imagenes, js, css, todo. Cuando menor sea, mas optimizada estara la web
• Cantidad de requests, para saber cuántos requests (peticiones) hacen en total, teniendo en cuenta de que cada uno consume ancho de banda de las cabezeras de petición y respuesta, aparte del tiempo de latencia de conexión al servidor, esto tambien es importante que sea bajo.

Bueno, hay infinidad mas, pero les quería presentar estas, si algúno quiere recomendar una puede hacerlo en los comentarios. Espero que la data les sirva.

Compártelo