Whatsapp

12 Complementos de Firefox para desarrolladores & Diseñadores

Anonim

Recientemente, publicamos una publicación sobre las 12 extensiones de Google Chrome para desarrolladores y diseñadores y algunas de esas extensiones están disponibles en Firefox , no repetiría ninguno aquí.

De la misma manera, algunas de las extensiones que se enumeran a continuación están disponibles en Chrome, así que considere dichas aplicaciones como bonificaciones para los respectivos navegadores.

1. Validador HTML

HTML Validator ejecuta su código para asegurarse de que sigue la convención estándar de HTML. Muestra el número de errores que ve en el icono de la barra de herramientas.

Complemento de Firefox Validator HTML

2. Octotree

Como desarrollador, reviso varias páginas de códigos en GitHub de vez en cuando cuando busco para ver cómo otros desarrolladores resolvieron ciertos problemas . Si eres como yo, encontrarás Octotree útil.

Octotree muestra el código de GitHub en formato de árbol. De esa forma, puede navegar a través de las líneas de código sin descargar los archivos fuente.

Octotree muestra el código de GitHub en formato de árbol

3. HTTPS en todas partes

HTTPS Everywhere cifra los datos que intercambia con las principales páginas web, incluso si no usan HTTPS.

Así que si te dirigen a páginas que no usan https, puedes estar seguro de que tu comunicación en línea es segura.

4. Prueba de rendimiento de la página

Prueba de rendimiento de página le proporciona estadísticas sobre sus páginas web midiendo su velocidad y rendimiento de carga. Puede guardar los resultados del gráfico para compararlo con pruebas posteriores.

Prueba de rendimiento de página

5. Captura de usuario

Usersnap le permite tomar capturas de pantalla de sitios web y anotarlos agregando dibujos y comentarios. También viene con una regla de píxeles y se puede integrar directamente con varias herramientas de gestión de proyectos, incluidas Slac, Trello y JIRA.

Esta lista no estaría completa sin Usersnap dado que permite un proceso de retroalimentación efectivo. Sin embargo, es un servicio pago con una prueba gratuita de 14 días.

Usersnap

6. Deshabilitar JavaScript

Disable JavaScript, como sugiere el nombre, le permite desactivar JavaScript en sitios web o solo en pestañas específicas. Puede personalizarlo para tener un estado JS predeterminado de encendido/apagado y un comportamiento de desactivación predeterminado por dominio/pestaña, etc.

Deshabilitar JavaScript

7. Lista de verificación del desarrollador web

La extensión Web Developer Checklist le brinda una descripción general de cuán usable es su sitio de acuerdo con las mejores prácticas de diseño y desarrollo.

Al hacer clic en el ícono, se le informará sobre el SEO de su sitio, URL amigables, favicon, etc. con marcas de verificación junto a ellos para indicar que aprobó.

Lista de control para desarrolladores web

8. Herramientas para desarrolladores de React

Con el aumento aparentemente interminable de la popularidad de React, los desarrolladores de React nacen casi todos los días y el equipo de React los tiene cubiertos.

React Developer Tools le brinda la capacidad de inspeccionar un árbol React junto con su estado, accesorios, jerarquía, etc. Para activarlo , inicie las herramientas de desarrollo de Firefox y cambie a la pestaña Reaccionar.

También hay una versión para desarrolladores de Vue en forma de Vue.js devtools.

Herramientas de desarrollo React

9. ColorZilla

ColorZilla es una excelente herramienta para desarrolladores y diseñadores gráficos para elegir colores de diferentes páginas web.

También contiene un cuentagotas, un generador de degradados, un explorador de paletas y un historial de colores.

ColorZilla

10. Clipper web de Evernote

Evernote Web Clipper le permite tomar capturas de pantalla de páginas web y guardarlas automáticamente en su Evernotecuenta desde la que puede hacer anotaciones y compartir con los miembros del equipo.

Evernote Web Clipper

11. Administrador de cookies

Cookie Manager es una extensión consciente de la seguridad que le permite ver, agregar, editar, eliminar y buscar cookies en cualquier dominio.

Lo que es aún mejor del Administrador de cookies es que puede exportar e importar cookies entre dominios.

Administrador de cookies

12. Editor en vivo para CSS y LESS

Live Editor para CSS y LESS le permite escribir código CSS/LESS directamente en su navegador. Su código entra en vigencia de inmediato y se guardará a nivel del sitio en el almacenamiento local de su navegador.

Su editor en la página cuenta con autocompletado, embellecimiento, linter, etc. Debería comprobarlo.

Editor en vivo para CSS

¿Te apetece alguna de las extensiones enumeradas o tienes una lista que podamos usar? La sección de comentarios está debajo.