Si eres un desarrollador, es probable que ya tengas una buena colección de extensiones para Chrome que utilizas a diario. Extensiones que te facilitan la vida, te hacen más productivo o realizan una tarea esencial mejor que una herramienta dedi
cada. Aún así, lo que pretendo con esta lista es aumentar esa colección además de tener a mano todos los nombres indispensables por si, algún día, te decides a hacer una limpieza completa en tu Chrome y las quieres ir instalando a medida que te hacen falta.
Como la gran mayoría de nosotros utilizamos Chrome, tiene sentido considerar que este listado se base solo en extensiones para Chrome. Existen otros navegadores, pero Chrome es utilizado por el 62,6% de los usuarios de Internet, aún así, la gran mayoría de ellas se pueden descargar para Firefox.
Aunque no es muy bueno en cuanto a privacidad, ¡sin duda es un as de la productividad!
He tratado de ordenarlas según una categoría base que te indica más globalmente su funcionalidad, así, si estás buscando algo concreto, no tendrás que ir leyendo una a una su descripción para encontrar la funcionalidad que necesitas en la extensión para Chrome. Sin más, ¡comenzamos!
1. DESARROLLO
Augury
Esta es mi extensión DevTool favorita y la número uno, ya que suelo trabajar con Angular. Augury es una extensión para Chrome creada por Rangle.io para depurar, perfilar y optimizar proyectos Angular.
Augury proporciona una rica interfaz de usuario en las DevTools, donde puedes
- Ver el gráfico de árbol DI de los componentes
- Editar y cambiar las propiedades de los componentes
- Emitir eventos
- y mucho más…
Personalmente, me resulta útil cuando quiero saber a qué profundidad puede descender en el árbol del componente un disparador de detección de cambios de un componente.
Si eres un desarrollador de Angular y no utilizas Augury en tus DevTools, te estás perdiendo mucho. Augury es todo lo que necesitas para depurar aplicaciones Angular directamente desde tu navegador.
NOTA: Actualmente, incomprensiblemente solo está disponible para Firefox, suponemos que es cuestión de tiempo que se vuelva a habilitar en las extensiones para Chrome.
Clear Cache
Borra tu caché y tus datos de navegación con un solo clic.
Borra rápidamente tu caché con esta extensión para Chrome sin diálogos de confirmación, ventanas emergentes u otras molestias. Puedes personalizar qué y cuántos datos quieres borrar en la página de opciones, incluyendo: Caché de aplicaciones, Caché, Cookies, Descargas, Sistemas de archivos, Datos de formularios, Historial, BD indexada, Almacenamiento local, Datos de plugins, Contraseñas y WebSQL.
Las cookies pueden eliminarse de forma global, sólo para determinados dominios o para todo excepto para determinados dominios.
JSON Viewer
El resaltador JSON/JSONP más bonito y personalizable que tus ojos hayan visto jamás. Es una extensión para Chrome para imprimir JSON y JSONP.
Library Sniffer
Suelo tener curiosidad por saber con qué framework está construida una página web y las librerías que utiliza.
LibrarySniffer ayuda mucho con eso. Esta herramienta te proporcionará detalles sobre una página web, tanto si se ejecuta en React, Angular, Vue, Svelte, WordPress, etc.
Ya sabes, por si quieres saberlo, como yo.
Light House
Lighthouse es una herramienta automatizada de código abierto para mejorar la calidad de las páginas web y una de las extensiones para Chrome predeterminada en sus últimas versiones. Puedes ejecutarla contra cualquier página web, pública o que requiera autenticación. Tiene auditorías de rendimiento, accesibilidad, aplicaciones web progresivas, SEO y mucho más.
Open in VSCode
Abre los enlaces de Github y Gitlab en VSCode. Sólo tienes que hacer clic con el botón derecho en cualquier enlace a un archivo y seleccionar «Abrir en VSCode». También puedes hacer clic en los enlaces de las líneas para abrir el archivo en cuestión.
React Developer Tools
Añade herramientas de depuración de React a las Herramientas para desarrolladores de Chrome.
React Developer Tools es una extensión para Chrome DevTools para la biblioteca de código abierto React JavaScript. Te permite inspeccionar las jerarquías de los componentes React en las Herramientas para Desarrolladores de Chrome.
Redux DevTools
Redux DevTools para depurar los cambios de estado de la aplicación. La extensión proporciona herramientas para tu flujo de trabajo de desarrollo de Redux. Además de Redux, puede utilizarse con cualquier otra arquitectura que maneje el estado.
Vue.js devtools
Extensión para Chrome Devtools para depurar aplicaciones Vue.js.
Web Developer
Se trata de un conjunto de herramientas. Web Developer añade una barra de herramientas a tu navegador. Esta barra de herramientas tiene un montón de herramientas útiles que tanto programadores como diseñadores pueden utilizar en su trabajo diario, simplificándolo.
Va desde añadir contornos a los elementos, mostrar reglas, encontrar todas las imágenes rotas en una página hasta cambiar el diseño de la página, manipular imágenes.
Añade más funciones de las que se necesitan con frecuencia al inspector predeterminado de DevTools.
2. DISEÑO
ColorPick Eyedropper
El cuentagotas ColorPick tiene un panel flotante que se sitúa sobre los elementos de una página web, mostrando el color del elemento. Si haces clic en el elemento, se copiará el color del elemento seleccionado en el portapapeles. Es una forma estupenda de acelerar el tiempo que se tarda en descubrir, copiar y pegar un color.
ColorZilla
Con ColorZilla puedes obtener una lectura del color desde cualquier punto de tu navegador, ajustar rápidamente este color y pegarlo en otro programa. Y puede hacer mucho más.
CSS Scan
CSS Scan es la forma más rápida de inspeccionar y copiar CSS. Visualiza el CSS de cualquier elemento sobre el que pases el ratón al instante y copia todas sus reglas CSS con un solo clic. Esta extensión es de pago y requiere una licencia para su uso.
CSSViewer
CSSViewer es un sencillo visor de propiedades CSS creado originalmente por Nicolas Huon como complemento de FireFox (2006-2008).
Emoji Keyboard by JoyPixels®
El principal teclado emoji del mundo para Chrome. ¡Ahora compatible con Unicode 13!
Eye Dropper
Eye Dropper es una extensión para Chrome de código abierto que te permite elegir colores de páginas web, del selector de colores y de tu historial personal de colores. Te permite elegir un color de cualquier página web o del selector de color avanzado. Es una gran herramienta para los desarrolladores.
Responsive Viewer
Una extensión para Chrome para mostrar múltiples pantallas en una sola vista. La extensión ayudará a los desarrolladores de frontend a probar múltiples pantallas mientras desarrollan sitios web/aplicaciones responsivas.
Site Palette
Extensión para Chrome que genera paletas de colores. Una herramienta imprescindible para diseñadores y desarrolladores frontales. Consigue colores para cualquier sitio web.
sitemode.io
Esta es sin duda una de las mejores extensiones para Chrome para los desarrolladores web, ya que les permite modificar, guardar y compartir cualquier sitio web, y además en tiempo real.
La extensión Sitemod.io permite a los desarrolladores modificar un sitio web sin tener acceso al código fuente y también crear un enlace compartible al sitio web modificado.
Es una gran herramienta si eres diseñador web y tienes ideas para el sitio web de un posible cliente.
Utiliza las Herramientas para Desarrolladores de Chrome para editar el código HTML, CSS o JS de una página web, y permite añadir tu código a la página web. Sitemod.io es una extensión para Chrome imprescindible en tu kit de herramientas para desarrolladores.
Stylebot
Puedes cambiar la apariencia de la web al instante utilizando esta extensión para Chrome. En esta extensión, puedes escoger un elemento y elegir cualquier cambio que quieras hacer desde el editor, puedes cambiar la fuente, el color, los márgenes, la visibilidad, y mucho más. También puedes codificar el CSS manualmente.
UX Check
UX Check hace que las evaluaciones heurísticas sean rápidas y fáciles. La extensión abrirá las diez heurísticas de Nielsen en un panel lateral junto a tu sitio web. Cuando hagas clic en un elemento que no cumpla una heurística, podrás añadir notas y se guardará una captura de pantalla. Al final, puedes exportar todo a un docx para poder compartirlo con tu equipo.
WhatFont
La forma más fácil de identificar las fuentes en las páginas web. Firebug y Webkit Inspector son bastante fáciles de usar para los desarrolladores. Sin embargo, para los demás, esto no debería ser necesario. Con esta extensión para Chrome, podrás inspeccionar las fuentes web con sólo pasar el ratón por encima de ellas. Es así de sencillo y elegante. También detecta los servicios utilizados para servir las fuentes web. Es compatible con Typekit y Google Font API.
3. PRODUCTIVIDAD
axe by Deque
Si alguna vez estás en Twitter, te darás cuenta de que se grita mucho sobre la accesibilidad, y con razón, ya que la web debería ser un lugar inclusivo. Por muy sano que sea, nosotros mismos estamos a un mal día de necesitar un sitio web accesible. Sé compasivo y, con esta herramienta, podrás identificar fácilmente las correcciones necesarias para crear un sitio web totalmente compatible con las WCAG.
Obtendrás una pequeña pestaña extra en tus herramientas de desarrollador de Chrome que te dirá cómo lo estás haciendo.
Bookmark Sidebar
Añade una barra lateral conmutable con todos tus marcadores en el borde de la ventana del navegador.
Enhanced GitHub
Muestra el tamaño del repo, el tamaño de cada archivo, el enlace de descarga y la opción de copiar el contenido de los archivos. Extensión para Chrome que proporciona funciones útiles sobre el sitio web de GitHub.
Fake Filler
Fake Filler es el rellenador de formularios que rellena todos los campos de entrada de una página con datos falsos generados aleatoriamente. Esta extensión que aumenta la productividad es imprescindible para los desarrolladores y probadores que trabajan con formularios, ya que elimina la necesidad de introducir manualmente los valores en los campos.
Focus To-Do: Pomodoro Timer & To Do List
Focus To-Do combina el Temporizador Pomodoro con la Gestión de Tareas, es una aplicación basada en la ciencia que te motivará para mantenerte concentrado y hacer las cosas. Aporta la Técnica Pomodoro y la Lista de Tareas en un solo lugar, puedes capturar y organizar las tareas en tus listas de tareas, iniciar el temporizador de enfoque y centrarte en el trabajo y el estudio, establecer recordatorios para tareas y recados importantes, comprobar el tiempo empleado en el trabajo.
Es la aplicación definitiva para gestionar tareas, recordatorios, listas, eventos del calendario, listas de la compra, listas de control, para ayudarte a concentrarte en el trabajo y el estudio y para controlar tus horas de trabajo. Focus To-Do se sincroniza entre tu teléfono y tu ordenador, para que puedas acceder a tus listas desde cualquier lugar.
Momentum
Sustituye la nueva página de pestañas por un tablero personal con las tareas pendientes, el tiempo y una imagen de inspiración.
Esta nueva página se abrirá con las nuevas pestañas y te dará un momento de calma e inspiración para ser más productivo.
Inspírate con una foto y una cita diarias, establece un enfoque diario y haz un seguimiento de tus tareas pendientes. Elimina las distracciones y vence la procrastinación con un recordatorio de tu enfoque del día en cada nueva pestaña.
Octotree – GitHub code tree
Una de las extensiones para Chrome dedicadas a los repositorios GIT que mejora la revisión y exploración del código de GitHub.
Características: Árbol de código similar al de un IDE, Búsqueda de carpetas y archivos, Soporte de repositorios privados, Marcación de repos/archivos/emisiones/solicitudes de extracción, Alto rendimiento, trabajo con repositorios de cualquier tamaño.
Save to Google Drive
Esta extensión te permite guardar contenido web directamente en Google Drive a través de una acción del navegador o del menú contextual. Puedes guardar documentos, imágenes y audio y vídeo HTML5, todo ello haciendo clic con el botón derecho y seleccionando «Guardar en Google Drive». Puedes guardar la página que estés viendo en ese momento mediante la acción del navegador «Guardar en Google Drive». La ubicación del directorio y el formato de las páginas HTML guardadas pueden controlarse con la página de opciones de la extensión (elección de Imagen completa (por defecto), Imagen visible, HTML crudo, MHTML o Google Doc). Puedes convertir automáticamente archivos de Microsoft Office o archivos separados por comas al formato de Google Docs.
Toby for Chrome
Toby es mejor que los marcadores, pues nivela tu navegador Chrome. Toby es un espacio de trabajo visual que vive en cada nueva pestaña. Añade nuevas pestañas arrastrando y soltando las pestañas de tu navegador en colecciones o guarda una sesión completa con un solo clic. Accede a todas tus colecciones en cualquier escritorio con la sincronización automática. Utiliza etiquetas para organizar tus colecciones o crear notas para tus tareas pendientes.
Wappalyzer
Wappalyzer es más que un detector de CMS o de frameworks: descubre más de mil tecnologías en docenas de categorías como lenguajes de programación, analítica, herramientas de marketing, procesadores de pago, CRM, CDN y otras. Instala Wappalyzer para Chrome y descubre de un vistazo las tecnologías utilizadas en los sitios web que visitas.
4. CAPTURAS DE PANTALLA
Awesome Screenshot & Screen Recorder
Captura tu pantalla con Awesome Screenshot & Screen Recorder, una potente herramienta para compartir la pantalla, utilizada por millones de usuarios. Guarda las grabaciones y capturas de pantalla en awesomescreenshot.com y comparte tus vídeos e imágenes al instante con enlaces compartibles únicos.
GoFullPage
Ahora más que nunca, especialmente con el aumento del trabajo a distancia, poder compartir una captura de pantalla de página completa es un truco práctico al que se puede acceder.
Con un solo clic, esta extensión para Chrome «atrapa» tu página y comienza a desplazarse tomando capturas de pantalla y uniendo una captura de pantalla de página completa sin fisuras. Luego puedes elegir descargar la foto en PNG, JPG o PDF. Aquí tienes un ejemplo que tomé de mi propio canal de YouTube.
Scrn.li – Screenshot Tool and Editor
Herramienta de captura de pantalla para hacer una captura de pantalla completa o parcial con la posibilidad de editarla, descargarla o añadirle texto. La aplicación avanzada para hacer una captura de pantalla de una página web completa o sólo de una parte de ella con la posibilidad de editar, guardar y descargar la captura de pantalla en tu PC. La aplicación se ejecuta desde un navegador que te ahorra totalmente el tiempo. Simplemente haz clic en el icono de la extensión para elegir entre las opciones de captura de pantalla de toda la página o de una parte seleccionada.
Vimeo Record – Screen & Webcam Recorder
Graba y comparte ilimitados mensajes de vídeo gratuitos desde tu navegador ¿Sabías que hablamos hasta 7 veces más rápido de lo que escribimos? La próxima vez que pienses en enviar un largo correo electrónico o un mensaje de chat, considera si una grabación de vídeo podría comunicar tus ideas mejor, y más rápido.
Tanto si se trata de una demostración de producto, como de un comentario de diseño o de una sesión de transferencia de conocimientos, con el grabador de pantalla de Vimeo puedes grabar y compartir rápidamente un número ilimitado de mensajes de vídeo.
Elige grabar tu pantalla, tu voz, tu cara o una combinación. Una vez que hayas terminado de grabar, puedes compartir instantáneamente tu vídeo con un enlace privado. Todos los vídeos grabados se suben automáticamente a Vimeo, que te ofrece una serie de herramientas como organizar y reemplazar vídeos, personalizar el reproductor, compartir vídeos con tus equipos, añadir marcadores de capítulo y mucho más.
Únete a más de 200M de usuarios que han elegido Vimeo como hogar para sus vídeos.
5. WORKSPACES
Google Keep Chrome Extension
Guarda en Google Keep con un solo clic ¿Has encontrado una página web, una imagen o una cita que quieres guardar para más tarde? Con la Google Keep Extension para Chrome, guarda fácilmente las cosas que te interesan en Keep y haz que se sincronicen en todas las plataformas que utilices, incluidas la web, Android, iOS y Wear. Toma notas para obtener más detalles y añade etiquetas para clasificar tu nota rápidamente para recuperarla más tarde.
Loom for Chrome
Mensajes de vídeo para el trabajo. Desde la incorporación de nuevos empleados, la resolución de problemas de los clientes o las revisiones de código, Loom facilita la transmisión de tu mensaje de forma rápida y clara utilizando el poder del vídeo. Con Loom, puedes grabar tu pantalla, tu voz y tu cara para crear un vídeo que se pueda compartir al instante en menos tiempo del que tardarías en escribir un correo electrónico. Reduce las idas y venidas al escribir y haz que tu mensaje llegue a la primera. Tus compañeros de trabajo y clientes te lo agradecerán.
Notion Web Clipper
Notion Web Clipper te ayuda a guardar cualquier página de la web en tu espacio de trabajo de Notion. Captura y organiza todos los artículos, investigaciones e inspiraciones que quieras, y nosotros te ayudaremos a convertirlos en acción.
Save to Pocket
La extensión de Pocket para Chrome es la forma más fácil y rápida de capturar artículos, vídeos y cualquier otra cosa que encuentres en la web. Con un solo clic, el contenido que has recopilado aparece en todos tus dispositivos en un espacio limpio y libre de distracciones, para que lo leas cuando estés preparado, ya sea en casa, en el trabajo o sobre la marcha.
BONUS
Aunque estas extensiones para Chrome no sean para el desarrollo web, las encontrarás muy útiles en cuanto a tener algo de mano para seguridad y como feed de noticias.
6. SEGURIDAD
HTTPS Everywhere
Esta es una adaptación de la popular extensión HTTPS Everywhere para Firefox, creada por la EFF y el Proyecto Tor. Cambia automáticamente miles de sitios del inseguro «http» al seguro «https». Te protegerá contra muchas formas de vigilancia y secuestro de cuentas, y algunas formas de censura.
Keeper® Password Manager & Digital Vault
Protege y autocompleta las contraseñas con el gestor de contraseñas seguras y bóveda digital más fiable y número uno en descargas del mundo. Mantente protegido con el gestor de contraseñas y la cámara acorazada digital más fiable y número uno en descargas del mundo. El gestor de contraseñas de Keeper genera, almacena y autocompleta contraseñas seguras en todos tus dispositivos, a la vez que almacena y protege de forma segura tus documentos privados. Que no te pirateen. Consigue Keeper.
7. NOTICIAS
Devo
Devo es una extensión para Chrome de pestañas nuevas que muestra GitHub Trending, Hacker News, Product Hunt y las páginas principales de muchas plataformas diferentes en cada pestaña nueva, sin necesidad de iniciar sesión. Puedes cambiar la colocación de las fichas, mostrar la plataforma que quieras en diferente orden.
