20 Extensiones de Chrome y Firefox para Desarrolladores

Estas son las 20 extensiones imprescindibles para desarrolladores web, agrupadas por categoría: desarrollo (Firebug, Web Developer, LiveReload, Tincr, Paste Lorem Ipsum), móvil y responsive (Window Resizer, Chrome to Phone, Ripple, Adobe Edge Inspect CC), front-end (JSON View, jQuery API Browser, Frameworks), diseño (ColorZilla, WhatFont, PerfectPixel), rendimiento (YSlow, PageSpeed, Speed Tracer) y accesibilidad (Chrome Vox, W3C Validator). Todas gratis para Chrome y/o Firefox.

Disponer de buenas herramientas es un punto diferencial para los desarrolladores que buscan más rapidez y calidad en su trabajo. El editor de código o el entorno de desarrollo son las herramientas más importantes a tener en cuenta, pero las extensiones de Firefox y Chrome son un complemento muy importante a tener en cuenta.

Tabla resumen

Categoría	Extensiones
Desarrollo	Firebug, Web Developer, LiveReload, Tincr, Paste Lorem Ipsum
Móvil / Responsive	Window Resizer, Chrome to Phone, Ripple, Adobe Edge Inspect CC
Front-end	JSON View, jQuery API Browser, Frameworks
Diseño	ColorZilla, WhatFont, PerfectPixel
Rendimiento	YSlow, PageSpeed, Speed Tracer
Accesibilidad	Chrome Vox, W3C Validator

Desarrollo

Firebug

Una alternativa para Firefox a las Developer Tools de Chrome. Permite editar código, estilos y scripts de la página que se está visualizando.

Web Developer

Un conjunto de herramientas y funcionalidades que te ayudarán en el proceso de desarrollo Web. Disponible para Firefox y Chrome.

LiveReload

¿Cansado de pulsar F5 para actualizar la página cada vez que haces un cambio en el código de tu Web? LiveReload actualiza tu navegador cada vez que detecta cambios. Disponible para Firefox y Chrome.

Tincr

Cualquier alteración hecha en el CSS a través de Developer Tools de Chrome se salva automáticamente en su archivo CSS local. Disponible sólo para Chrome.

Paste Lorem Ipsum

Genera un texto Lorem Ipsum con sólo dos clicks. Disponible para Chrome, aunque existe una extensión similar en Firefox.

Móvil y Responsive

Window Resizer

Redimensiona la ventana de tu navegador para probar cómo se comporta tu Web en cada tamaño. Excelente para hacer tests de Responsive Design. Disponible para Firefox y Chrome.

Chrome to Phone

¿Quieres saber cómo se ve una Web en tu móvil? Esta extensión conecta con tu teléfono y abre directamente la URL que estás viendo en tu navegador. Disponible para Chrome.

Ripple

Un emulador completo que ofrece múltiples funcionalidades para diversas plataformas y dispositivos móviles. Disponible para Chrome.

Adobe Edge Inspect CC

Comprueba cómo se ve tu Web en diferentes dispositivos y plataformas. Disponible para Chrome, Android e iPhone.

Front-end

JSON View

Organiza cualquier JSON, haciéndolo legible para las personas. Disponible para Firefox y Chrome.

jQuery API Browser

¿No recuerdas para qué servía esa función de jQuery? Consúltalo rápidamente sin tener que ir a la Web de la documentación. Disponible para Chrome.

Frameworks

Esta extensión para Chrome muestra los Frameworks JavaScript que utiliza la Web en la que estás actualmente.

Diseño

ColorZilla

¿Encontraste un color que te gusta en una Web? No hace falta que hagas “Imprimir Pantalla” y abras Photoshop: ColorZilla lo copia directamente a tu portapapeles. Disponible para Firefox y Chrome.

WhatFont

Extensión para Chrome que te dice qué fuente se está utilizando en la página que estás viendo. Para Firefox hay una similar llamada Font Finder.

PerfectPixel

Excelente herramienta para verificar la correcta implementación de la maqueta de diseño en tu Web. Disponible para Chrome, aunque existe una extensión similar en Firefox.

Rendimiento

YSlow

Comprueba los puntos que afectan al rendimiento de tu Web de acuerdo con las directrices de Web Performance de Yahoo. Disponible para Firefox y Chrome.

PageSpeed

Similar a YSlow, pero siguiendo las directrices de Web Performance de Google. Disponible para Firefox y Chrome.

Speed Tracer

Extensión para Chrome que analiza las métricas de tiempo de ejecución de JavaScript, la velocidad de los selectores CSS y la integridad de las peticiones HTTP, entre otras.

Accesibilidad

Chrome Vox

Un lector de pantalla que permite probar cómo tu Web es interpretada por personas que tienen deficiencias visuales. Disponible para Chrome.

W3C Validator

Una extensión que te lleva directamente al validador W3C de HTML y CSS de la Web que estás visitando. Disponible para Chrome, aunque existe una extensión similar para Firefox.

Preguntas frecuentes

¿Funcionan estas extensiones en Chrome y Firefox?

Depende. Algunas (Firebug, Web Developer, LiveReload, JSON View, ColorZilla, YSlow, PageSpeed) están disponibles para los dos navegadores. Otras (Tincr, Ripple, Chrome to Phone, WhatFont, PerfectPixel, Speed Tracer, Chrome Vox) son exclusivas de Chrome, aunque suele haber alternativas similares para Firefox.

¿Qué combinación es la más rápida para iterar sobre CSS?

LiveReload junto con Tincr. LiveReload recarga el navegador automáticamente cuando detecta cambios en el código y Tincr guarda en el archivo CSS local cualquier cambio que hagas desde Developer Tools. Así evitas pulsar F5 y pegar cambios manualmente.

¿YSlow y PageSpeed se solapan o son complementarios?

Son complementarios. YSlow sigue las directrices de Web Performance de Yahoo y PageSpeed las de Google. Pasarlos los dos te da una visión completa del rendimiento de tu web.

¿Cómo puedo comprobar si mi web es accesible para personas con problemas de visión?

Instala Chrome Vox: es un lector de pantalla que te permite probar cómo interpretan tu web personas con deficiencias visuales, sin tener que instalar software dedicado.

Conclusiones clave

• LiveReload + Tincr son la combinación más rápida para iterar sobre CSS sin recargar el navegador ni pegar cambios manualmente.
• Para tests de responsive sin cacharreo, Window Resizer es suficiente para la mayoría de casos; si necesitas emular APIs nativas, Ripple es más completo.
• YSlow y PageSpeed son complementarios: YSlow sigue las reglas de Yahoo y PageSpeed las de Google. Pasarlos los dos da una visión completa del rendimiento.
• ColorZilla y WhatFont ahorran horas en el día a día de cualquier diseñador o front-end que tenga que copiar estilos de webs reales.
• Chrome Vox es la forma más rápida de comprobar si tu sitio es navegable con lector de pantalla, sin instalar software dedicado.