En este artículo, veremos 20 extensiones de navegador diferentes que pueden ser útiles para los desarrolladores web en 2024. Todas estas extensiones están disponibles para Google Chrome, pero la mayoría también están disponibles en Firefox y otros navegadores.
No hay ningún orden en particular ni ninguna clasificación. También estoy dejando de lado extensiones como las herramientas de desarrollo de React y Vue, Clockwork para Laravel y otras extensiones específicas de frameworks porque quiero que esta lista sea más general y no solo para un framework o lenguaje específico. Dado que HTML, CSS y JS son el núcleo del desarrollo web frontend, algunas de estas extensiones están orientadas a esas tecnologías.
Considero que las extensiones del navegador son muy útiles para tres cosas principales.
- Obtener información de otros sitios web : código, colores, fuentes, tecnologías, etc. Cuando creo un sitio web o un diseño, utilizo muchos otros sitios web como inspiración. Por eso, es bueno ver qué sucede en segundo plano.
- Desarrollar, probar y depurar mis propios proyectos : estas extensiones son muy útiles si necesito encontrar enlaces rotos, verificar el rendimiento o probar diferentes tamaños de pantalla.
- Productividad : me gusta completar formularios rápidamente, guardar cosas, tomar notas, administrar mis pestañas y otras tareas similares. Por eso , existen algunas extensiones que me ayudan con eso.
Las primeras extensiones sirven para obtener información de otros sitios web.
1. ColorZilla
ColorZilla es un selector de color y generador de degradados que puedes usar para obtener el color de cualquier píxel de una página web. Esto es genial para el diseño web porque, muchas veces, cuando creamos diseños, usamos otros sitios como inspiración. Entonces, si ves un color que te gusta, puedes usar ColorZilla para obtener el código hexadecimal rápidamente. Puedes hacer clic en el selector de color y luego hacer clic en cualquier lugar para obtener ese color. Incluso puedes usarlo fuera del navegador ahora, lo cual es realmente genial. Incluso puedes crear degradados y guardarlos en tu biblioteca. Entonces, si estás creando interfaces de usuario y diseños, esta es definitivamente una herramienta imprescindible.
2. ¿Qué fuente?
WhatFont pertenece al mismo ámbito que ColorZilla. Es posible que veas una fuente que realmente te guste y quieras usar y, en lugar de buscar en los archivos CSS de los sitios, puedes usar esta extensión para averiguar qué fuente se está utilizando. Puedes hacer clic en el ícono de WhatFont y luego pasar el cursor sobre cualquier texto de la página para ver qué fuente es. También puedes hacer clic en el texto para obtener más información, como el tamaño de la fuente, la altura de la línea y el color.
3. Analizador de wappa
Wappalyzer es un generador de perfiles de tecnología que te muestra qué tecnologías se están utilizando en un sitio web. Por lo tanto, si estás en un sitio web y tienes curiosidad por saber con qué está construido, puedes hacer clic en el icono de Wappalyzer y te mostrará qué tecnologías se están utilizando. Por ejemplo, si vamos a https://wordpress.org , podemos ver que está construido con WordPress, obviamente. Te mostrará lenguajes de programación, bases de datos, servidores web, marcos y más. Si vamos a https://react.dev , podemos ver que está construido con Next.js. Mi sitio web, https://traversymedia.com, utiliza la plataforma Kajabi para video y comercio electrónico, Ruby, Cloudinary para imágenes, algunas bibliotecas JS y más. Por lo tanto, es una forma genial de ver qué está sucediendo bajo el capó de un sitio web.
4. Desarrollador web
Web Developer es una extensión muy popular que agrega una barra de herramientas con varias herramientas para desarrolladores web. Muchas de estas herramientas están disponibles con las herramientas de desarrollo estándar en la mayoría de los navegadores, pero esto agrega mucha más granularidad. Tienes más administración de cookies y sesiones. Me gusta que puedas deshabilitar rápidamente todos los estilos de JavaScript y CSS. Puedes deshabilitar los estilos predeterminados del navegador. Edita los archivos CSS directamente en tiempo real dentro de un diseño eficiente. Puedes hacer todo tipo de cosas con formularios como marcar todas las casillas de verificación, convertir ciertos tipos de entrada a otros tipos, eliminar la validación, mostrar detalles del formulario y mucho más. Para las imágenes, puedes deshabilitarlas, hacerlas de tamaño completo, delinear imágenes de fondo, mostrar atributos alt, etc. Puedes cambiar rápidamente el tamaño de la ventana a valores específicos. Puedes validar tu HTML, CSS, enlaces y accesibilidad y mucho más. Creo que vale la pena tenerlo instalado para cualquier desarrollador front-end.
5. Lector oscuro
Dark Reader es una extensión popular que te permite habilitar el modo oscuro en cualquier sitio web. Es más cómodo para la vista y también es ideal para los desarrolladores web porque puedes ver cómo se ve tu sitio en modo oscuro. Puedes habilitarlo para cada sitio o de forma global. Puedes ajustar el brillo, el contraste, el sepia y más. También puedes excluir ciertos sitios si lo deseas. Lo uso todo el tiempo y es imprescindible para mí porque, de hecho, tengo problemas con las moscas volantes y se encienden cuando miro pantallas brillantes durante mucho tiempo.
6. Formateador JSON
JSON Formatter es una extensión sencilla que formatea datos JSON de una forma más legible. Por lo tanto, si trabajas con API y recibes una respuesta JSON, puede resultar difícil de leer si no está formateada. Por lo tanto, puedes hacer clic en el icono de JSON Formatter y la formateará por ti. También puedes contraer y expandir objetos y matrices. Es una extensión sencilla pero muy útil. Todavía tenemos la opción de ver los datos sin formato también.
Puedes probarlo instalándolo y visitando algo como https://api.github.com/users o https://jsonplaceholder.typicode.com/posts/1 .
7. Compañero de sesión
Session Buddy es un administrador de sesiones que te permite ver, guardar y restaurar las sesiones de tu navegador. Por lo tanto, si tienes un montón de pestañas abiertas y quieres guardarlas para más tarde, puedes hacer clic en el icono de Session Buddy y guardarlas. También puedes nombrar la sesión y agregar notas. Luego, puedes restaurarlas en cualquier momento. También puedes exportar e importar sesiones. Lo uso todo el tiempo porque tengo muchas pestañas abiertas y me gusta guardarlas para más tarde. También me gusta que puedas buscar entre tus sesiones.
Extensión similar para Firefox
8. Relleno falso
Fake Filler es un rellenador de formularios que te permite rellenar formularios rápidamente con datos falsos. Por lo tanto, si estás probando un formulario o simplemente quieres rellenarlo rápidamente, puedes hacer clic en el icono de Fake Filler y lo rellenará por ti o puedes hacer clic derecho en un formulario y seleccionar una opción del menú desplegable. También puedes crear perfiles personalizados y guardarlos. Es una extensión muy útil para las pruebas y la productividad. Lo uso todo el tiempo y voy a empezar a usarlo en cursos y tutoriales porque sé que a ustedes no les gusta verme escribir datos falsos en un formulario cada vez que hacemos una prueba.
9. Visor de código fuente rápido
Quick Source Viewer es una extensión sencilla que te permite ver el código fuente de una página web de una forma mucho más detallada y organizada. Si haces clic en el icono, verás el código fuente en una nueva pestaña. A continuación, puedes hacer clic en cualquier archivo para verlo. También puedes buscar entre los archivos y ver el código fuente en una vista de árbol.
Complemento similar para Firefox
10. Visor CSS
CSS Viewer es una extensión sencilla que te permite ver el CSS de cualquier elemento de una página web. Puedes hacer clic en el icono de CSS Viewer y pasar el cursor sobre cualquier elemento para ver el CSS. También puedes hacer clic en el elemento para ver más información, como el tamaño de la fuente, la familia de fuentes, el color y más. También puedes hacer clic en el CSS para copiarlo en el portapapeles.
11. Selector de agente de usuario
User-Agent Switcher te permite cambiar de agente de usuario de forma rápida y sencilla. Esto es ideal para probar cómo se ve tu sitio en diferentes dispositivos. Puedes hacer clic en el ícono y luego elegir de una lista de agentes de usuario. También puedes agregar agentes de usuario personalizados. También puedes configurar reglas para cambiar de agente de usuario automáticamente según la URL. Esto es imprescindible para probar el diseño responsivo.
12. VisBug
VisBug es una herramienta de diseño que te permite realizar cambios en una página web de forma visual. Puedes hacer clic en el icono de VisBug y luego en cualquier elemento para realizar cambios. Puedes editar el contenido de forma local desde las herramientas de desarrollo habituales, pero esta es una forma mucho más eficiente de hacerlo. Puedes cambiar el texto, el color, el tamaño, la posición y más. También puedes agregar elementos nuevos, moverlos y eliminarlos. También puedes ver la cuadrícula y el espaciado. Es una herramienta muy potente y es ideal para realizar cambios rápidos en una página web sin tener que entrar en el código.
13. Diario.dev
Daily.dev es un agregador de noticias para desarrolladores. Tienen algunos de los mejores y más recientes artículos, tutoriales y noticias del mundo del desarrollo web. Puedes hacer clic en el ícono de Daily.dev o simplemente abrir una nueva pestaña y te mostrará los últimos artículos. También puedes buscar temas específicos. También puedes guardar artículos para leerlos más tarde. Yo uso esta herramienta todo el tiempo para mantenerme al día con las últimas noticias y tendencias en desarrollo web.
14. Depuración de LT
LT Debug es una herramienta de depuración y prueba bastante avanzada y detallada. Puede agregar o eliminar encabezados, bloquear y redirigir solicitudes, cambiar agentes de usuario, limitar respuestas, administrar CORS y más. Solo para darle un ejemplo, podemos hacer clic en «Modificar encabezados» y darle un nombre de regla, un nombre de encabezado y un valor, aplicarlo a una URL y guardarlo. Ahora, cuando vaya a una URL donde se aplica esta regla y abra las herramientas de desarrollo, verá el encabezado en la solicitud.
Esto es muy útil cuando estás probando API y la información que estás enviando al servidor. También hay una lista de todas las reglas que creaste y puedes habilitarlas y deshabilitarlas. También hay muchas otras funciones y es una herramienta muy poderosa.
15. Revisa mis enlaces
Check My Links es un verificador de enlaces que te permite comprobar rápidamente todos los enlaces de una página web. Puedes hacer clic en el icono de Check My Links y te mostrará todos los enlaces válidos, los enlaces de redireccionamiento válidos, las advertencias y los enlaces no válidos. También puedes copiar los resultados en formato CSV. Es muy sencillo, pero muy útil.
Complemento similar para Firefox
16. Lista de verificación para desarrolladores web
Web Developer Checklist es una extensión sencilla que te ofrece una lista de verificación de las cosas que debes hacer al desarrollar un sitio web. Puedes hacer clic en el ícono y te mostrará una lista de cosas que debes marcar. También puedes agregar tus propios elementos. Es una buena manera de asegurarte de que no te estás olvidando de nada cuando estás desarrollando un sitio web. De hecho, tengo algunos errores, pero en mi defensa, la mayoría tienen que ver con la plataforma de comercio electrónico y video que estoy usando. Pero te ayuda a detectar cosas que quizás te hayas perdido.
17. Clics hacia arriba
Click Up es una herramienta de gestión de proyectos que te permite crear tareas, listas y tableros. Puedes hacer clic en el icono de Click Ups y te mostrará todas tus tareas. Tiene muchas funciones, como un bloc de notas, integración de correo electrónico, seguimiento del tiempo, capturas de pantalla y más. Es necesario registrarse para usarla, pero es gratuita y excelente para la productividad.
18. CheckBot
CheckBot es un auditor de sitios web que comprueba el SEO, la velocidad, la seguridad y más. Puedes hacer clic en el icono de CheckBot y te mostrará un informe de cualquier problema. También puedes ver el informe en una nueva pestaña. También puedes exportar el informe como PDF. Es una herramienta muy útil para asegurarte de que tu sitio web esté a la altura. Yo obtengo un 80 %, por lo que hay algunas mejoras que puedo hacer. Nuevamente, muchas de estas cosas se deben a la plataforma que estoy usando. Solo lo digo 😄.
Complemento similar para Chrome
19. Pestaña IE
IE Tab es una extensión que te permite ver una página web en Internet Explorer. Es ideal para probar cómo se ve tu sitio en versiones anteriores de IE. Sé que muchos desarrolladores, incluido yo mismo, ya no se preocupan por IE, pero si estás trabajando en un proyecto que lo requiere, esta es una gran herramienta. Puedes hacer clic en el icono de IE Tab y se abrirá la página actual en IE. También puedes agregar URL personalizadas para abrir en IE. Puedes configurar excepciones y hay un montón de opciones, incluida la versión de IE.
Complemento similar para Firefox
20. Generador de Lorem Ipsum
Lorem Ipsum Generator es una extensión sencilla que te permite generar textos de lorem ipsum. Puedes hacer clic en el icono y generará tantos párrafos como quieras de textos de lorem ipsum. También puedes generar listas, encabezados y más. También puedes establecer la longitud del texto. Es una extensión sencilla pero muy útil para realizar pruebas y aumentar la productividad. Funciona bien con la extensión Fake Filler.
Así que eso es todo. Esas son 20 extensiones de navegador que creo que son muy útiles y productivas para el desarrollo web. Espero que hayas encontrado algo que te guste. Si tienes alguna extensión que creas que debería estar en esta lista, házmelo saber en los comentarios. Siempre estoy buscando nuevas herramientas para probar. Gracias por leer y nos vemos en la próxima.