Las mejores extensiones de Chrome para desarrolladores

He agrupado 16 extensiones de Chrome que uso o he probado a fondo, organizadas por lo que realmente necesitas en el día a día: depurar código, inspeccionar frameworks, revisar accesibilidad o simplemente ganar tiempo en tareas repetitivas.

Inspección y depuración general

Web Developer sigue siendo la extensión de referencia para desactivar CSS, revisar formularios o inspeccionar cookies desde una sola barra de herramientas. Es la primera que instalo en cualquier equipo nuevo.

Wappalyzer identifica con qué tecnologías está construida cualquier web: CMS, framework de frontend, analítica, hosting. Útil para analizar la competencia o entender rápido un proyecto ajeno.

JSON Vue formatea automáticamente cualquier respuesta JSON que abras en el navegador, con colores y plegado de nodos, en vez del texto plano sin formato de Chrome.

Clear Cache te ahorra el menú de configuración cuando necesitas limpiar caché rápido mientras pruebas cambios en una web.

Depuración de React, Vue y Redux

Si trabajas con algún framework de JavaScript moderno, estas tres son casi obligatorias:

• React Developer Tools: inspecciona el árbol de componentes de React, sus props y su estado directamente desde las DevTools de Chrome.
• Vue.js devtools: el equivalente para Vue, con inspección de componentes, eventos y del store de Pinia o Vuex.
• Redux DevTools: viaja en el tiempo por el historial de acciones de tu store Redux, muy útil para depurar cambios de estado complejos.

Si un componente de React no se re-renderiza cuando debería, React Developer Tools te enseña las props recibidas en tiempo real, antes de llenar el código de console.log.

Diseño y accesibilidad

• ColorZilla: cuentagotas de color con historial, más un generador de degradados CSS. La uso constantemente para calcar paletas de referencias visuales.
• WhatFont: pasa el cursor sobre cualquier texto de una web y te dice qué tipografía, tamaño y peso está usando.
• WAVE Evaluation Tool: audita accesibilidad de una página en un clic, marcando errores de contraste, etiquetas ARIA mal usadas o falta de texto alternativo.

Productividad y navegación de código

• Window Resizer: cambia el tamaño de la ventana a resoluciones predefinidas (móvil, tablet, escritorio) para probar diseño responsive sin abrir las DevTools.
• Octotree: añade un árbol de carpetas lateral a GitHub, para navegar repositorios grandes sin abrir cada carpeta por separado.
• Library Sniffer: detecta qué librerías de JavaScript usa una web y si tienen vulnerabilidades conocidas.
• Web Developer Checklist: pasa un chequeo rápido de buenas prácticas (metaetiquetas, favicons, validación HTML) sobre la página que estés viendo.

Rendimiento y privacidad

• Lighthouse: audita rendimiento, accesibilidad, SEO y buenas prácticas de cualquier página, con puntuación y recomendaciones concretas.
• Ghostery: bloquea rastreadores y anuncios mientras te muestra exactamente qué scripts de terceros carga una web.

Mi recomendación si solo puedes instalar tres: Web Developer para el día a día, el DevTools de tu framework principal (React o Vue) y Lighthouse para no perder de vista el rendimiento antes de publicar cambios.

Preguntas frecuentes

¿Cuántas extensiones de Chrome puedo tener activas sin que afecten al rendimiento?

No hay un número fijo, pero cada extensión activa consume memoria y puede ralentizar la carga de páginas. Desactiva las que no uses a diario en vez de desinstalarlas y reinstalarlas.

¿Estas extensiones funcionan en Edge o Brave?

La mayoría sí, porque Edge y Brave usan el mismo motor Chromium y son compatibles con la Chrome Web Store, aunque conviene comprobarlo extensión por extensión.

¿React Developer Tools funciona con Next.js?

Sí, al estar Next.js construido sobre React, la extensión detecta e inspecciona los componentes igual que en cualquier proyecto de React puro.

¿Uso alguna extensión que eches en falta en esta lista? Cuéntamela en los comentarios.