5 de los mejores complementos de Firefox Quantum para desarrolladores web

Un número creciente de desarrolladores web se han pasado a Firefox en los últimos meses impulsados por el lanzamiento de Firefox Quantum después de que mejorara el rendimiento para estar a la par con Google Chrome.

Aunque Firefox ofrece herramientas decentes para los desarrolladores por defecto con características innovadoras como su inspector de cuadrículas CSS, todavía es posible añadir características más interesantes al navegador a través de su ecosistema de complementos.

Con eso en mente, aquí hay unas cuantas extensiones que debería probar si usa Firefox para el desarrollo web.

Relacionado: 26 trucos de Firefox Quantum About:Config que debe aprender

1.Informe de compat

El informe de compatibilidad le ayuda a identificar posibles problemas de compatibilidad con los navegadores al desarrollar sitios o aplicaciones web. Por el momento sólo funciona para CSS.

Una vez que instale la extensión, se añadirá un nuevo panel de “Compatibilidad” a las herramientas del desarrollador. Desde allí podrá ver cómo se espera que funcione cualquier sitio en cada uno de los principales navegadores

Las versiones de los navegadores que no presentan problemas de compatibilidad están coloreadas en verde, las que tienen algunos problemas en amarillo y las que tienen varios en rojo. Puede profundizar en versiones específicas de navegadores para ver las reglas CSS exactas que causan los problemas.

2. JSON Lite

Si trabaja con frecuencia con APIs JSON, puede que le resulte tedioso ver los datos JSON en el navegador. Esto se debe a que el navegador no le da el formato adecuado por defecto, lo que dificulta su lectura.

JSON Lite soluciona ese problema formateando las respuestas JSON y JSONP con un resaltado de sintaxis adecuado y una función de colapso de nodos que resulta útil cuando se inspeccionan datos JSON enormes.

Si no necesita todas las funciones que ofrece JSON Lite, puede simplemente habilitar el visor de JSON incorporado en Firefox escribiendo “about:config” en la barra de direcciones y buscando luego devtools.jsonview.enabled. Póngalo en “true” haciendo doble clic en la opción, y luego cargue cualquier archivo JSON en su navegador para ver el resultado.

3. React Devtools

React es una de las bibliotecas más populares hoy en día en el ecosistema del desarrollo web. Si desarrolla aplicaciones web con React, verá mucho valor en el uso de su extensión de navegador para depurar su código.

Una vez instalado, podrá examinar el código de React en cualquier sitio web que lo utilice. El icono del complemento aparecerá en la barra de herramientas del navegador, y también obtendrá una pestaña React junto a los demás paneles de DevTools. El panel de React permitirá inspeccionar un árbol de React, incluyendo la jerarquía de componentes, props, estado y más.

También puede instalar Vue.js devtools y Redux DevTools si desarrolla con cualquiera de las dos bibliotecas.

Relacionado: Cómo personalizar la página de nueva pestaña de Firefox Quantum y hacerla aún mejor

4. Fontanello

Fontanello proporciona una forma realmente rápida de identificar las fuentes en cualquier sitio web. Con este complemento, ya no es necesario abrir las devtools sólo para averiguar qué tipo de letra utiliza un sitio web. Fontanello muestra los estilos tipográficos básicos del texto en el menú contextual del botón derecho de Firefox.

5. Wappalyzer

¿Se ha preguntado alguna vez qué tecnologías se utilizan para construir sus sitios web favoritos? Wappalyzer puede proporcionarle esta información en un solo clic. Puede detectar varios sistemas de gestión de contenidos, plataformas de comercio electrónico, servidores web, marcos de JavaScript, software de bases de datos, herramientas de análisis y muchos más.

Recapitulando

Si está buscando potenciar su flujo de trabajo de desarrollo, no puede equivocarse con ninguna de las extensiones mencionadas anteriormente. No olvide compartir sus favoritas en la sección de comentarios más abajo.

Este artículo se publicó por primera vez en octubre de 2010 y se actualizó en marzo de 2018.

¿Es útil este artículo?

No

Deja un comentario

Este sitio web utiliza cookies para mejorar tu experiencia. Si continuas utilizando este sitio consideramos que estás de acuerdo con esto. Más información

Los ajustes de cookies en esta web están configurados para «permitir las cookies» y ofrecerte la mejor experiencia de navegación posible. Si sigues usando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar», estarás dando tu consentimiento a esto.

Cerrar