Si eres desarrollador o diseñador, es probable que ya tengas una colección de extensiones de Chrome favoritas que utilizas a diario. Extensiones que te facilitan la vida, te hacen más productivo o realizan una tarea esencial mejor que una herramienta dedicada. Esta lista puede aumentar esa colección.
Como la gran mayoría de nosotros utilizamos Chrome, tiene sentido considerar las extensiones de Chrome. Existen otros navegadores, pero Chrome es utilizado por 68,7% de usuarios de Internet. Aunque no es muy privado, sí que es muy productivo.
Hemos sondeado a nuestro propio equipo y hemos pedido a todos los desarrolladores que conocemos su lista de extensiones de Chrome para desarrolladores que utilizan habitualmente o que sugerirían.
A continuación presentamos una lista de las mejores extensiones de Chrome para desarrolladores.
Puede que no sean las extensiones más populares, pero el equipo de Astra las ha probado y comprobado.
Las mejores extensiones de Chrome
Extensiones de Chrome imprescindibles para desarrolladores web:
- Wappalyzer: Identificar las tecnologías que impulsan cualquier sitio web.
- Validador HTML: Compruebe si hay errores en el código HTML y asegúrese de que la sintaxis es correcta.
- Visor JSON: Renderiza datos JSON en un formato legible por humanos.
- Lista de comprobación para desarrolladores web: Obtenga una lista de comprobación de las mejores prácticas para el desarrollo web.
- Herramientas para desarrolladores de React: biblioteca JavaScript React de código abierto.
Extensiones de Chrome imprescindibles para diseñadores web:
- BrowserStack: Pruebas entre navegadores en vivo que le permiten previsualizar su sitio web en varios navegadores.
- Redimensionador de ventanas: Simula diferentes tamaños y resoluciones de pantalla.
- Borrar caché: Borra fácilmente la caché del navegador y actualiza las páginas.
- Generador Lorem Ipsum: Genere rápidamente texto de marcador de posición para sus diseños.
- Visor de CSS: Inspeccione y analice los estilos CSS aplicados a los elementos de una página web.
Si prefiere verlo o está de viaje, este post se ha convertido en un vídeo de alta calidad.
El vídeo dura menos de 5 minutos y resume a la perfección las mejores extensiones de Chrome para desarrolladores.
Cada extensión de esta lista ha sido probada y utilizada regularmente por nuestros desarrolladores y diseñadores internos para aumentar la eficacia de su trabajo.
Seguro que aquí hay algo que te vendrá bien.
1. WhatFont
WhatFont es una extensión de Chrome muy útil para desarrolladores y diseñadores que necesitan identificar fuentes utilizadas en las páginas web. Es rápido, eficaz e identifica fuentes individuales dentro de una página en cuestión de segundos. También identifica la familia, el tamaño, el peso y el color. Todo dentro de una pequeña ventana emergente en el navegador.
WhatFont es ideal para los desarrolladores web a los que les gusta recopilar ejemplos de grandes páginas que podrían querer emular en el futuro. Es pequeño, no utiliza muchos recursos y merece la pena usarlo. Hace tiempo que no se actualiza, pero sigue funcionando perfectamente.
Más de 1.000.000 de usuarios
Valoración: 3,5/5 por facilidad de uso
2. Fuentes Ninja
Fonts Ninja funciona de forma similar a WhatFont para identificar fuentes dentro de una página web. Es una alternativa útil si WhatFont no te funciona por alguna razón. Funciona de forma muy parecida pero tiene una interfaz más pequeña. Por lo demás, las dos extensiones son muy parecidas.
Instala la extensión y verás un pequeño icono ninja verde en tu barra de herramientas. Abre una página web en Chrome, selecciona el icono y pasa el ratón por encima de la fuente que quieras identificar. Aparecerá una ventana emergente con una descripción general de la página y una ventana emergente individual sobre la fuente resaltada. Simple pero muy eficaz.
Más de 300.000 usuarios
Valoración: 3,5/5 por facilidad de uso
3. Cuentagotas ColorPick
ColorPick Eyedropper es un complemento de Chrome adaptado a los diseñadores web.
Esta lupa para colores es una herramienta súper práctica. Te permite identificar y seleccionar fácilmente cualquier color de una página web, incluso haciendo zoom para capturar pequeños bordes de 1px de ancho.
Aunque puede que no lo utilices a diario, tenerlo en tu kit de herramientas puede ser un ahorro de tiempo real.
Una vez instalado el cuentagotas ColorPick, sólo tienes que seleccionar el icono de la rueda de color para activarlo. El cursor se convertirá en una cruz, resalte la sección que desea identificar y debería ver los valores RGB y el hexágono aparecer a la derecha de la pantalla.
Más de 1.000.000 de usuarios
Valoración: 3,5/5 en usabilidad, cero en diseño UX
4. Redimensionador de ventanas
Window Resizer es una extensión de Chrome increíblemente útil para desarrolladores web. Es sencilla pero muy eficaz, especialmente cuando se trabaja con diseños o aplicaciones adaptables. Se instala en Chrome y redimensiona cualquier pantalla en la que estés trabajando a una serie de tamaños de pantalla populares. Extensiones como Window Resizer ayudan a desarrollar temas responsivos para WordPress que se ven muy bien en dispositivos móviles y de sobremesa.
Se cubren los tamaños más comunes, móvil, tableta, escritorio y la emulación parece muy precisa. Los chicos de aquí usan Window Resizer mucho y lo valoran muy positivamente. Eso es suficiente para nosotros.
Más de 600.000 usuarios
Valoración: 4,5/5 por facilidad de uso y sencillez
5. BrowserStack
BrowserStack es otra extensión de Chrome excepcionalmente útil para desarrolladores web. Al igual que Window Resizer, esta extensión le permite probar la capacidad de respuesta de su trabajo. En lugar de diferentes tamaños de pantalla, esta extensión le permite probar con diferentes navegadores.
Instale la extensión, abra su página en Chrome, seleccione BrowserStack y elija una opción de dispositivo en la pestaña. A continuación, la página se renderizará utilizando una emulación de un navegador en ese dispositivo. Sencillo pero muy eficaz. Eso sí, necesitas una cuenta de BrowserStack para que funcione correctamente.
Más de 100.000 usuarios
Valoración: 3/5 la usabilidad es alta, el requisito de una cuenta es una marca definitiva en su contra.
6. Visor CSS
CSS Viewer es otra extensión de Chrome sencilla pero muy eficaz para desarrolladores web. Como su nombre indica, este addon te muestra el Propiedades CSS de una página determinada allí donde pase el ratón. Aparece una pequeña ventana emergente que te muestra los datos CSS que componen el elemento que estás señalando.
Tanto si desea crear temas sencillos para WordPress o modernas y complejas, se trata de una extensión muy inteligente que facilita la identificación de las propiedades CSS clave en cualquier lugar al que apuntes con el ratón.
Más de 100.000 usuarios
Valoración: 4/5 por su sencillez y facilidad de uso
7. Generador Lorem Ipsum
Lorem Ipsum Generator es una de las mejores extensiones de Chrome y punto. Hace lo que su nombre sugiere que hace. Genera texto de relleno para sitios web de demostración y lo hace bien.
Simplemente instala la extensión, selecciónala dentro de una página, dile cuánta copia Lorem Ipsum quieres generar y cópiala desde la ventana. Pégalo en tu página y listo.
Más de 20.000 usuarios
Calificación 4/5 por su facilidad de uso
8. Componer la IA
Compose AI es una extensión que puede generar diversos textos utilizando IA. Usarlo es realmente sencillo.
Después de instalar la extensión se integrará perfectamente en su flujo de trabajo. Simplemente escribe // en el lugar donde quieras añadir el contenido, ¡y pídele lo que quieras!
Más de 400.000 usuarios
4 estrellas de 5
9. Ghostery
Chrome es un gran navegador para muchas cosas, pero la privacidad no está entre ellas. Ghostery pretende ayudar con eso. Es una extensión de privacidad diseñada para bloquear anuncios intrusivos, detener el rastreo, evitar la recopilación de datos y bloquear todos esos elementos de página que te ralentizan.
Aunque Ghostery no proporciona ninguna herramienta útil para el desarrollo web, mantiene tu experiencia de navegación limpia y hace que todo sea más rápido. Todos los usuarios de Chrome deberían instalar Ghostery.
Más de 2.000.000 de usuarios
Calificación 5/5 por su eficacia
10. Wappalyzer
Wappalyzer es una herramienta muy eficaz para identificar las tecnologías subyacentes a las páginas web. Identifica rápidamente los servicios web, el tipo de CMS, herramientas de análisis webplugins, bibliotecas JavaScript y un sinfín de aplicaciones más. Si quieres conocer los secretos que esconde una página, esta es una forma de averiguarlo.
Sólo tienes que instalar la extensión, seleccionarla mientras estás en una página y aparecerá una ventana emergente destacando todas las aplicaciones identificables que se ejecutan en esa página.
Más de 1.000.000 de usuarios
Valoración 4/5 por la utilidad y la claridad de la interfaz de usuario
11. Borrar caché
¿Cuántas veces has modificado un ajuste y te has preguntado por qué el cambio no se reflejaba en pantalla? No eres el único, por eso Clear Cache es una extensión para desarrolladores de Chrome tan útil.
Instale la extensión y seleccione el pequeño icono de reciclaje en su navegador para borrar la caché del navegador. No hay confirmaciones ni diálogos adicionales. Esta herramienta simplemente hace lo que se supone que debe hacer y todos podemos seguir adelante. Por eso nos encanta.
Más de 800.000 usuarios
Valoración: 4,5/5 por su sencillez
12. Validador HTML
HTML Validator es una herramienta rápida para comprobar tu HTML dentro de un navegador. Hay cientos de herramientas HTML por ahí y es probable que ya tengas un montón de ellas. Pero HTML Validator es realmente útil para validar rápidamente el marcado dentro del navegador.
Instala la extensión, abre una ventana de desarrollador en la página y navega hasta la pestaña HTML Validator. Toda su bondad HTML se muestra dentro con errores en la parte superior.
Más de 30.000 usuarios
Valoración: 4/5 en usabilidad, pero hay mucha competencia.
13. Herramientas para desarrolladores de React
React Developer Tools es específico para la biblioteca de código abierto React JavaScript. Si trabajas con React, esta extensión te ayuda a inspeccionar la biblioteca según tus necesidades.
Instale la extensión y debería ver aparecer dos iconos en la barra de herramientas de Chrome. Uno es para Componentes y el otro para Profiler. Components te muestra lo que React está usando en la página y Profiler te muestra datos de rendimiento. Si trabajas con React, esta es una herramienta esencial.
Más de 4.000.000 de usuarios
Valoración: 4/5 por la facilidad de uso para una biblioteca especializada
14. Visor JSON
JSON Viewer es una alternativa a JSONView y ayuda a gestionar los datos JSON en una vista jerárquica rápidamente reconocible en una ventana del navegador. Trabajar con datos JSON en bruto está bien cuando se tiene tiempo, pero el uso de este complemento hace que el código sea más fácil de absorber y utilizar rápidamente.
Es una pequeña extensión para desarrolladores de Chrome, pero merece la pena echarle un vistazo. Con más de 800.000 usuarios y buenas críticas, es sin duda una extensión que hay que probar.
Más de 800.000 usuarios
Valoración 4/5 por su fiabilidad y facilidad de uso.
15. ColorZilla
ColorZilla es una magnífica extensión de Chrome para que los diseñadores obtengan los códigos de color de las páginas web. Incluye un selector de colores con cuentagotas, una herramienta de historial de colores, un analizador de degradados CSS y un analizador de páginas que evalúa los colores de una página web.
Si encuentra un sitio web cuya paleta le resuene, esta herramienta le ayudará a identificar las combinaciones o los colores individuales en cuestión de segundos. Es una extensión esencial para cualquiera que trabaje con el color en la web.
Más de 2.000.000 de usuarios
Valoración: 4/5 en usabilidad y productividad
16. Dimensiones
Dimensions es una medida dinámica que utiliza el ratón. Es una extensión para desarrolladores de Chrome muy útil si quieres medir espaciado, dimensiones, espacios entre elementos de la página y cualquier otra cosa que veas en la página.
Una vez instalado, verás un pequeño icono en forma de cruz en tu barra de herramientas. Abre una página en Chrome, selecciona el icono y verás una cruz en la pantalla. Muévelo alrededor de donde quieras medir y verás que aparecen las dimensiones exactas junto a la cruz. Simple pero muy eficaz.
Más de 100.000 usuarios
Valoración: 4/5 en usabilidad y productividad
17. Regla de página
Page Ruler es similar a Dimensions en que es una extensión de medición dinámica. Mientras que Dimensiones puede medir la altura y anchura de los elementos, es más útil para medir entre ellos. Regla de Página mide esos elementos con mucha precisión.
Cuando necesites medir algo, selecciona el icono de la regla para que se vuelva naranja. La página se desvanece, permitiéndole dibujar el elemento que desea medir. La extensión presentará entonces las medidas exactas del elemento en un pequeño cuadro emergente a su lado.
Más de 20.000 usuarios
Valoración: 4.5/5 sencillo pero se tarda un minuto en saber como usarlo
18. UX Check
UX Check es un analizador de usabilidad que evalúa una página utilizando las 10 heurísticas de Nielsen. Puede resaltar rápidamente posibles problemas de usabilidad y permite añadir notas, hacer capturas de pantalla y exportar los resultados para compartirlos con el equipo.
UX Check es una forma muy eficaz de realizar pruebas de usuario ligeras sin entrar en demasiados detalles. Es ideal como primera prueba antes de someter un proyecto a pruebas completas.
Más de 30.000 usuarios
Valoración: 4/5 por productividad y facilidad de uso
19. Comprobar mis enlaces
Check My Links hace exactamente lo que dice en la lata. Es una forma muy sencilla de comprobar si hay enlaces rotos. También puede comprobar los enlaces válidos y redirigidos, así como los rotos. Aunque técnicamente es una herramienta para desarrolladores, esta extensión de Chrome para desarrolladores también podría ser útil para SEO y otras especialidades.
Una vez instalado en Chrome, debería ver un pequeño icono de marca de verificación en su barra de herramientas. Carga tu página, selecciona el icono y aparecerá una ventana emergente con todos los enlaces evaluados. Dependiendo del tamaño de la página, esto puede tardar unos segundos, pero funciona a la perfección.
Más de 200.000 usuarios
Valoración: 4,5/5 en usabilidad en todas las disciplinas web
20. Lista de comprobación para desarrolladores web
¿A quién no le gusta una lista de comprobación? Web Developer Checklist es una extensión para desarrolladores de Chrome que te ofrece una lista de comprobación de todas las cosas que hay que completar en una página antes de publicarla. Es un complemento muy útil para desarrolladores ocupados.
Instale la extensión y verá aparecer un icono de código en la barra de herramientas. Selecciónelo en una página y aparecerá una ventana emergente con las mejores prácticas que debe completar antes de publicar. Entre ellas se incluyen SEO, móvil, usabilidad, accesibilidad, social, rendimiento y otras medidas seleccionables.
Un verdadero salvavidas.
Más de 40.000 usuarios
Valoración: 4/5 por su facilidad de uso y utilidad
Si eres nuevo en un desarrollo webesta extensión puede mejorar significativamente su jornada laboral.
21. Checkbot
Checkbot es similar a la Web Developer Checklist en el sentido de que comprueba una página en busca de enlaces, errores, seguridad, rendimiento, SEO y una serie de otras consideraciones. Es una herramienta muy útil que se suma a tu repertorio y puede ser útil para una última pasada antes de la publicación.
Checkbot se instala de la misma manera que todas las extensiones. Una vez hecho esto, selecciona el icono azul para abrir la barra lateral. Utilice los menús para seleccionar el tipo de prueba que desea realizar y los resultados se mostrarán en la página.
Más de 30.000 usuarios
Valoración: 4/5 por cubrir las herramientas básicas y añadir controles de seguridad básicos
22. Desarrollador web
Web Developer es un conjunto de herramientas contenidas en una única extensión de Chrome. Aunque se titula 'Web Developer', creemos que esta herramienta también es adecuada para desarrolladores en general, ya que contiene una serie de herramientas útiles que cualquier desarrollador puede utilizar.
Una vez instalado, se puede acceder a Web Developer mediante el pequeño icono de engranaje de la barra de herramientas. Una vez seleccionado, debería ver aparecer un pequeño cuadro desplegable con una serie de opciones organizadas en pestañas. Seleccione una pestaña para acceder a las herramientas que contiene. Hay muchas cosas aquí, pero cada herramienta es realmente útil.
Más de 1.000.000 de usuarios
Valoración: 4/5 por tener tantas herramientas para tantas tareas
23. EditarEstaCookie
EditThisCookie es una extensión de Chrome excepcionalmente útil para desarrolladores. Permite editar, eliminar, crear y proteger cookies por página. También le permite exportarlas para su análisis, bloquearlas, importarlas a JSON y, en general, hacer todo lo que pueda necesitar hacer con una cookie.
La herramienta más útil es la capacidad de buscar y leer cookies. Los desarrolladores encontrarán útiles la mayoría de las herramientas en un momento u otro.
Más de 2.000.000 de usuarios
Valoración: 3.5/5 por la cantidad de cosas que puedes hacer con una galleta
24. Lightshot
Lightshot es otra de esas extensiones de Chrome para desarrolladores que puede ser útil para todo tipo de personas. Mientras que los desarrolladores probablemente la usarán mucho, los probadores de UX, los probadores de usuarios, los instructores, los diseñadores gráficos y todo tipo de usuarios harán grandes capturas de pantalla con esta herramienta.
Una vez instalado, abre la página que quieras capturar y selecciona el icono de la pluma. Arrastra y suelta el cursor por la zona que quieras capturar. Selecciona en el menú emergente que aparece y guarda la captura.
Valoración: 4/5 por ser sencillo pero muy eficaz
25. Sesión Buddy
Session Buddy es otra herramienta generalista útil para desarrolladores y cualquier tipo de usuario web. Se trata de una herramienta de "guardar para más tarde" que puede guardar todas las pestañas abiertas en una única sesión para acceder a ellas más tarde. Es útil cuando te encuentras con algo que quieres leer más tarde o para proteger la productividad si utilizas varias pestañas.
Una vez instalado Session buddy, seleccione el pequeño icono de la barra de herramientas para ver todas las pestañas abiertas. Puedes seleccionar el icono después de una caída del navegador para recuperar todas las pestañas y guardar la sesión para cargarla más tarde. ¡Una herramienta muy útil para cualquier usuario de la web!
Más de 1.000.000 de usuarios
Valoración: 4/5 por proteger al mundo contra las caídas del navegador
26. Diario.dev
daily.dev no es una herramienta de productividad en sí, pero nos facilita mucho la vida. Es un agregador de noticias especializado en noticias sobre desarrollo. Presenta una página llena de noticias, entradas de blog y páginas útiles sobre el tema que hayamos elegido.
Daily actúa como página de inicio y agregador de noticias. Selecciona un elemento de la página para visitarlo. Cada una se abre en una nueva pestaña y será una mezcla de noticias, reseñas, consejos, how-tos y todas las cosas buenas que nos mantienen creciendo como desarrolladores. Esta es una excelente extensión para usar si te gusta estar al día.
Más de 40.000 usuarios
Valoración: 4.5/5 por reunir todas nuestras noticias en un solo lugar
Resumen
Esta recopilación muestra las mejores herramientas de Chrome para que dispongas de un arsenal de recursos con los que mejorar tu oficio.
Los límites son bastante laxos y se pueden encontrar herramientas para desarrolladores y también para diseñadores.
Por eso hemos decidido mostrarlas todas sin categorizar. No queremos que pase por alto herramientas que de otro modo descartaría pero que pueden ayudarle en su trabajo diario.
¿Tienes alguna extensión de Chrome que te encante? ¿Tienes algún complemento que te ayude en el desarrollo y diseño web? Si es así, compártelos a continuación.
Divulgación: Este blog puede contener enlaces de afiliados. Si realiza una compra a través de uno de estos enlaces, es posible que recibamos una pequeña comisión. Leer información. Tenga la seguridad de que sólo recomendamos productos que hemos utilizado personalmente y que creemos que aportarán valor a nuestros lectores. Gracias por su apoyo.
Personalmente utilizo algunas de estas extensiones en mis tareas diarias.
Puedo decir que estas son extensiones muy útiles para los desarrolladores web. Ya que hacen su trabajo mucho más fácil.
Gran lista de extensiones, defiantly sugerir a probarlos.
Impresionante artículo, he probado algunas de las extensiones anteriores y los que son bastante buenos. Me estaba tomando horas para hacer el trabajo simple manualmente.
Gran adición a mi navegador, Gracias.
La extensión Clear cache es realmente útil, cuando se trata de diseño web.
Definitivamente lo sugiero para los desarrolladores web.
Estas extensiones son las mejores para los desarrolladores web y ayudan a reducir la carga de trabajo.
Me encantan estas extensiones, no puedo vivir sin el tema.
Útiles extensiones de Chrome, que facilitan su vida diaria de trabajo duro.
A mi personalmente me gusta la extensión de chrome 'web developer', ya que puede realizar múltiples tareas y es muy práctica.
Impresionante artículo. Muy útil.
Espero recibir muchos más artículos útiles.
Este artículo me ha facilitado la vida. Me divertí leyendo y mi interés surgió realmente después de leer este artículo. Enhorabuena a los autores.
Probablemente el mejor artículo que he leído nunca. Buen trabajo a todos.
Uno de los mejores artículos que he leído.
¡Aplausos!
Uno de los mejores artículos que he leído.
¡Aplausos! ¡Increíble!
Me encanta el #4 de este listado. Estoy en los colores en estos días. ¡Me encanta mucho! ¡Espero más características para los próximos artículos y otras ideas para un sitio web!
Gracias, chicos.
Este artículo me ha facilitado la vida. Todos los listados eran muy útiles. Extensiones de Chrome son mucho más si sólo leer lo que este artículo tiene que decir. Esto construirá su sitio web y la colección de pensamientos sobre cómo ser más productivo.
¡Mirad esto, chicos!
Listados en este artículo son los más útiles que he tenido. Realmente confundido en este Chrome Extensiones desde el día en que empecé a usarlo. ¡Pero después de leer este artículo, se hizo claro a la mente y sin duda una necesidad!
¡Buen trabajo a los autores de este artículo!
Se necesitan muchos autores para elaborar un artículo que merezca la pena leer. ¡Este es sin duda un artículo que hay que leer!
Felicitaciones a los autores por todo el esfuerzo y conocimiento sobre las Extensiones de Chrome. Esto realmente ayudó mucho.
Realmente me costó entenderlo pero gracias a este artículo, mi vida se hizo más fácil. Ahora puedo entender completamente la función de las extensiones y cuál es la importancia de tener esto y aquello.
Gracias por este artículo, espero con impaciencia el próximo.
Gran artículo,
Voy a probar varios de ellos.
Como este es un sitio relacionado con WordPress, yo añadiría la extensión Scan WP chrome a la lista junto con Wappalyzer que es más general que específica de WP.
Sólo mis dos centavos.
Salud.
Esta es una muy buena recopilación de extensiones para los novatos para hacernos la vida más fácil, especialmente el Whatfont es una bendición para nosotros, se llega a saber qué fuentes se utilizan en los sitios / Mantenga la actualización. Gracias a quien hizo esta lista en el equipo editorial.
Hola Kurian,
Me alegro de que te haya resultado útil 🙂 .
Definitivamente recomendaría LinkedIn Hashtag-Chrome Extension[Link Redacted] para una mejor curaduría de las publicaciones de LinkedIn. Los hashtags son importantes para llegar a personas específicas, ¡y esta extensión ayuda muchísimo!
Gracias por compartir tus aportaciones 🙂 .
Me encantó trabajar con algunas de estas excelentes extensiones. Estas extensiones hicieron mi trabajo mucho más fácil; gracias por la gran lista.
¡Salud, Shaun!
gracias mucha información goodjobs