Las extensiones de Chrome que la mayoría de los desarrolladores web acaba conservando se agrupan en cinco tipos: devtools de frameworks (React, Vue, Angular, Redux), verificadores de accesibilidad (axe DevTools, WAVE), inspectores de páginas (Web Developer, WhatFont, ColorZilla, Wappalyzer), una herramienta de vista móvil y algunas utilidades. Instala solo lo que uses cada semana: cada extensión pide permisos y puede ralentizar el navegador. A continuación verás qué aporta cada una que Chrome DevTools no haga ya.
Aclaración: Mobile View Extension, que aparece en la sección de vista móvil, es nuestra. Las demás extensiones son de otros desarrolladores y están en la lista porque resuelven una necesidad concreta.
Lo que Chrome DevTools ya incluye
Antes de instalar nada, conviene saber qué viene de serie. Chrome DevTools trae inspección de elementos y CSS, depurador de JavaScript, registro de red y rendimiento, emulación de dispositivos móviles (guía), cambio de user agent (guía), auditorías de Lighthouse (guía), cuentagotas y comprobación de contraste en el panel Styles, y CSS Overview. Muchas extensiones antiguas “para desarrolladores web” repiten estas funciones. En nuestra guía de Chrome DevTools tienes un recorrido por los paneles integrados.
Devtools de frameworks
| Extensión | Creada por | Qué añade |
|---|---|---|
| React Developer Tools | Meta (equipo de React) | Paneles Components y Profiler: inspeccionar props, state y hooks, encontrar renders lentos |
| Vue.js devtools | Equipo de Vue | Árbol de componentes, estado de Pinia, router y timeline para apps Vue |
| Angular DevTools | Equipo de Angular | Explorador de componentes y profiler de detección de cambios |
| Redux DevTools | Mantenedores de Redux | Registro de acciones, diff del estado y depuración “time travel” para Redux y stores compatibles |
Instala la de tu framework. Solo se activan en páginas que lo usan.
Verificadores de accesibilidad
axe DevTools (de Deque) añade un panel a DevTools que analiza la página en busca de fallos WCAG, como etiquetas ausentes, poco contraste o errores ARIA, con explicaciones y enlaces a cada regla. La versión gratuita cubre los análisis automáticos.
WAVE (de WebAIM) coloca iconos sobre la propia página para mostrar dónde está cada error, aviso y elemento estructural. Es especialmente útil para explicar problemas a diseñadores y redactores.
Los verificadores automáticos solo detectan una parte de los problemas de accesibilidad. Úsalos junto con pruebas de teclado y un lector de pantalla.
Inspectores de páginas
Web Developer (de Chris Pederick) es una barra de herramientas veterana con cientos de pequeñas utilidades: desactivar CSS o JavaScript, resaltar elementos, mostrar el texto alternativo de las imágenes, ver los detalles de formularios y mucho más. Muchas de sus funciones existen en DevTools, pero la barra las deja a un clic.
WhatFont identifica la fuente del texto sobre el que pasas el cursor, incluida la fuente alternativa que realmente se está usando.
ColorZilla añade un cuentagotas para tomar colores de cualquier punto de la página, además de un historial de colores y un generador de degradados.
Wappalyzer muestra las tecnologías que usa un sitio: CMS, frameworks, analítica y hosting. Sirve para investigar a la competencia y para entender el stack de un cliente antes de un proyecto.
Vista móvil y pruebas responsive
El modo dispositivo de DevTools es potente, pero requiere varios pasos en cada pestaña y ocupa buena parte de la pantalla. Si revisas diseños móviles muchas veces al día, una extensión dedicada te ahorra tiempo.
Mobile View Extension recarga la pestaña actual dentro de un marco de teléfono o tablet, con el user agent, los client hints, el tamaño de pantalla y la densidad de píxeles de cada dispositivo. Eliges perfiles de Apple y Android o introduces una resolución personalizada, giras a horizontal y guardas una captura PNG de la vista enmarcada. Funciona en localhost, se mantiene activa mientras navegas y no recopila datos de navegación. Sus límites son los de casi cualquier vista previa dentro del navegador: se interactúa con el ratón, sin eventos táctiles, y algunas media queries como hover y pointer no se emulan del todo. Tienes una comparación completa en simulador móvil en extensión o DevTools.
Utilidades
Un visor de JSON formatea las respuestas JSON en bruto como un árbol desplegable cuando abres una URL de una API. Por defecto, Chrome las muestra como texto plano.
Un user agent switcher es útil si pruebas a menudo la detección de dispositivos o código específico de un navegador. Antes, lee qué hace un user agent switcher; para diseños móviles, una herramienta de vista móvil encaja mejor.
Cómo saber si una extensión es segura
Las extensiones para desarrolladores suelen pedir acceso a todos los sitios, lo que significa que pueden leer y modificar cualquier página que abras, incluidos paneles de administración y correo. Antes de instalar:
- Comprueba quién la publica. Las devtools de un framework deben venir del propio equipo del framework.
- Revisa los permisos en la ficha de Chrome Web Store. Un identificador de fuentes no necesita acceso a tus descargas.
- Lee la política de privacidad. Debe decir qué se recopila. “Nada” es una buena respuesta para la mayoría de herramientas de desarrollo.
- Mira la fecha de la última actualización. Las extensiones abandonadas fallan con las actualizaciones de Chrome y no reciben parches de seguridad.
- Vigila los cambios de propietario. A veces se venden extensiones populares que después empiezan a insertar anuncios. Si el comportamiento de una extensión cambia de repente, elimínala.
Usa un perfil de Chrome aparte para desarrollar si quieres separar estas extensiones de tu navegación personal.
Un kit mínimo para empezar
Si estás configurando un equipo nuevo, empieza por:
- las devtools de tu framework;
- axe DevTools o WAVE;
- una extensión de vista móvil;
- WhatFont o ColorZilla si trabajas muy de cerca con diseño.
Añade otras solo cuando te veas repitiendo una tarea que alguna de ellas resolvería.
Preguntas frecuentes
¿Cuál es la extensión de Chrome más útil para un desarrollador web?
Las devtools del framework con el que trabajas, porque nada en Chrome las sustituye. Después, un verificador de accesibilidad y una herramienta de vista móvil son lo que más aporta a la mayoría de desarrolladores front-end.
¿Las extensiones de Chrome ralentizan el navegador?
Cada extensión consume memoria y puede ejecutar scripts en cada página. Unas pocas extensiones bien hechas apenas se notan; decenas de ellas pueden ralentizar la carga de páginas y DevTools. Desactiva las que no uses.
¿Lighthouse es una extensión?
Lighthouse está integrado en Chrome DevTools como un panel. También existe una extensión de Lighthouse aparte, pero lo habitual es ejecutarlo desde DevTools.