5 de los mejores complementos de Firefox Quantum para desarrolladores web

Un número creciente de desarrolladores web ha cambiado a Firefox en los últimos meses debido al 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 de forma predeterminada con características innovadoras como su inspector CSS Grid, aún es posible agregar características más interesantes al navegador a través de su ecosistema de complementos.

Con eso en mente, aquí hay algunas extensiones que debe probar si usa Firefox para el desarrollo web.

1. Informe de compatibilidad

Informe de compatibilidad le ayuda a identificar posibles problemas de compatibilidad del navegador al desarrollar sitios web o aplicaciones web. Esto solo funciona para CSS por el momento.

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

Las versiones del navegador sin problemas de compatibilidad se muestran en verde, las que tienen algunos problemas en amarillo y las que tienen varios en rojo. Puede profundizar en versiones específicas del navegador para ver las reglas CSS exactas que causan los problemas.

2. JSON Lite

Si trabaja con API JSON con frecuencia, puede resultarle tedioso ver los datos JSON en el navegador. Esto se debe a que el navegador no lo formatea correctamente de forma predeterminada, lo que dificulta su lectura.

firefox-dev-extensions-json-lite-1

JSON Lite soluciona ese problema al formatear las respuestas JSON y JSONP con el resaltado de sintaxis adecuado y una función de colapso de nodos que es útil al inspeccionar datos JSON enormes.

firefox-dev-extensions-json-lite-2

Si no necesita todas las funciones que ofrece JSON Lite, puede habilitar el visor JSON integrado en Firefox escribiendo “about: config” en la barra de direcciones y luego buscando devtools.jsonview.enabled. Configúrelo en “verdadero” haciendo doble clic en la opción y luego cargando cualquier archivo JSON en su navegador para ver el resultado.

firefox-dev-extensions-json-lite-3

3. React Devtools

firefox-dev-extensions-react

React es una de las bibliotecas más populares en la actualidad en el ecosistema de 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 que esté instalado, podrá examinar el código de React en cualquier sitio web que lo use. El ícono del complemento aparecerá en la barra de herramientas del navegador, y también obtendrá una pestaña Reaccionar junto con los otros paneles de DevTools. El panel React permitirá inspeccionar un árbol de React, incluida la jerarquía de componentes, los accesorios, el estado y más.

En relación :  Cómo detectar y evitar una estafa de eBay

También puedes instalar Devtools de Vue.js y DevTools de Redux si desarrolla con cualquiera de las bibliotecas.

4. Fontanello

firefox-dev-extensions-fontanello

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

5. Wappalyzer

firefox-dev-extensions-wappalyzer

¿Alguna vez te has preguntado qué tecnologías se utilizan para crear tus sitios web favoritos? Wappalyzer puede proporcionarle esta información con un solo clic. Puede detectar varios sistemas de gestión de contenido, plataformas de comercio electrónico, servidores web, marcos de JavaScript, software de base de datos, herramientas de análisis y muchos más.

Terminando

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

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

Moyens Staff
Moyens I/O Staff te ha motivado, brindándote asesoría en tecnología, desarrollo personal, estilo de vida y estrategias que te ayudarán.