Joan León El análisis manual de rendimiento con Chrome DevTools tiene un límite claro: los gráficos muestran Long Tasks, pero sin conocer el código de antemano es difícil saber qué función las origina. El workaround obvio, descargar el Performance Trace y pasárselo al agente, tampoco funciona: un trace de 30 segundos pesa 5.5MB y más de 25.000 líneas. Desborda la ventana de contexto.
He creado un workshop que trabaja ese flujo con Gemini CLI conectada directamente al navegador vía Chrome DevTools MCP, eliminando el trace como intermediario.
Las Herramientas: Gemini CLI, MCP y Source Maps
Para que esto funcione, necesitamos tres piezas:
Gemini CLI
El agente de IA que corre en la terminal y tiene acceso al protocolo MCP.
MCP (Model Context Protocol)
El protocolo que da a Gemini permisos para navegar el navegador, ejecutar scripts en DevTools y acceder a los recursos de la página.
Source Maps
El vínculo entre el código minificado de producción y el código fuente legible. Cuando Gemini identifica una línea anónima en el profile, los Source Maps le dicen exactamente qué función la originó, en qué archivo y en qué línea.
Sin Source Maps, Gemini trabaja con los mismos nombres criptográficos que veríamos nosotros. Con Source Maps, el diagnóstico es concreto: handleFilterChange en FilterPanel.tsx:42, o useEffect en hooks.ts:128.
‼️ No es buena idea tener los Source Maps expuestos en producción. Los podemos tener accesibles bajo VPN, lo que nos facilita el trabajo, sin exponer nuestro código fuente.
El Workshop: De la Identificación a la Corrección
El workshop tiene cinco ejercicios que recorren el flujo completo en un proyecto real.
Ejercicio 1: Análisis Manual sin IA
El punto de partida es el proceso que hacemos hoy: abrir DevTools, grabar el profile, identificar el Long Task. El ejercicio pone sobre la mesa dos limitaciones concretas: no siempre es posible saber qué función origina el problema solo mirando el gráfico, y el trace descargado es demasiado pesado para pasarlo como contexto a un LLM.
Ejercicio 2: La Frustración del Código Minificado
La página tiene un problema de rendimiento. El navegador entrega código minificado. Los gráficos de Performance muestran Long Tasks, pero no su origen. El ejercicio consiste en explorar con Gemini qué parte del ciclo está fallando: ¿JavaScript? ¿rendering? ¿Network?
Sin Source Maps, el diagnóstico identifica el tipo de problema (JavaScript, rendering, Network), pero no el código que lo genera. Ese es el límite que aborda el ejercicio siguiente.
Ejercicio 3: El Descubrimiento Exacto con Source Maps
Con Source Maps disponibles, Gemini puede ir de la Long Task al código fuente. Lee el profile, identifica el bottleneck y devuelve un diagnóstico preciso: components/Dashboard.tsx, línea 67, función updateMetrics, cálculo sincrónico que debería ser async.
Saber exactamente qué línea genera el problema es el punto de partida del siguiente ejercicio, donde el flujo pasa de diagnóstico a corrección.
Ejercicio 4: Automatización Total
Con la causa identificada, Gemini actúa:
- Crea una rama con un nombre semántico para el bug
- Aplica el fix (async, optimización de rendering, lo que corresponda)
- Ejecuta el profile de nuevo para verificar que el Long Task desapareció
- Prepara la PR con mensaje descriptivo que documenta el cambio para el equipo o para otros agentes.
El análisis y la corrección ocurren en el mismo contexto, sin cambiar de herramienta. Una vez el fix está en la rama, el Ejercicio 5 amplía la mirada.
Ejercicio 5: Análisis Experto con Mejores Prácticas
El bug concreto es una oportunidad para revisar si el patrón aparece en otros componentes. Gemini analiza si la solución es escalable y qué mejores prácticas de React o Vercel aplican al caso.
El resultado no es solo un fix; es un análisis de revisión con contexto arquitectónico.
Conclusión
La combinación de Gemini CLI, Chrome DevTools MCP y Source Maps convierte el flujo de diagnóstico de rendimiento en un proceso verificable y reproducible. Con Gemini conectada directamente al navegador vía MCP, el agente no improvisa JavaScript ni interpreta gráficos visualmente: ejecuta, lee resultados y actúa sobre el código fuente real.
El workshop completo está disponible en Web Performance Debugging with Chrome DevTools MCP and AI Agents.