20 Extensiones de Chrome y Firefox para Desarrolladores
19-12-2013 Diseño Web HerramientasDisponer 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.
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
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” abras Photoshop, ColorZilla lo copia directamente a tu portapapeles. Disponible para Firefox y Chrome.
WhatFont
Extensión para Chrome que te dice qué fuente está 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.
