👨🏼‍💻

khriztianmoreno's Blog

Inicio Etiquetas Acerca |

Posts with tag debugging

Depuración Web con IA - Del Runtime del Navegador al Agente Autónomo

2026-05-18
debuggingmcpchrome-devtoolsaiperformance

La depuración web con IA tuvo durante años un problema fundamental: los modelos programaban con los ojos vendados. Podían leer tu código fuente, pero no podían ver qué pasaba en el navegador cuando ese código se ejecutaba. No veían la fuga de memoria, la petición de red fallida, ni el layout shift que solo ocurre bajo condiciones específicas.Eso cambió con la llegada del Model Context Protocol (MCP) y el Chrome DevTools MCP Server — un servidor oficial de Google que conecta directamente a los agentes de IA con el motor de renderizado del navegador. El agente ya no teoriza sobre tu código: lo observa corriendo en tiempo real y actúa sobre él.1. El Problema: La Ceguera del Código EstáticoUn LLM tradicional analiza el código fuente como texto estático. Puede detectar errores de sintaxis, sugerir refactors y explicar la lógica. Pero cuando la pregunta es "¿por qué mi LCP está en 4.2 segundos en mobile?" o "¿por qué el carrito falla solo cuando el usuario viene de una redirección de pago?", el modelo no tiene datos reales para responder.El Chrome DevTools Protocol (CDP) lleva años siendo la base de herramientas como Puppeteer y Playwright. El Chrome DevTools MCP Server lo expone directamente a cualquier agente compatible con MCP.2. Configuración: Conectar el Agente al NavegadorInstalaciónEl paquete oficial está publicado en npm como chrome-devtools-mcp:# Ejecutar directamente sin instalar (recomendado para probar) npx -y chrome-devtools-mcp@latest # O instalar globalmente npm install -g chrome-devtools-mcpConfigurar en tu IDEPara Cursor o VS Code con extensión MCP, crea o edita .cursor/mcp.json (o .vscode/mcp.json):{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } }Para Claude Code (CLI), el archivo es ~/.claude/claude_desktop_config.json:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } }Dos modos de conexiónModo aislado (recomendado): El servidor levanta una instancia limpia de Chrome con perfil temporal. El agente tiene control total sin tocar tu sesión principal.Modo --autoConnect (Chrome M144+): Conecta directamente a tu sesión activa. Para habilitarlo, abre chrome://inspect/#remote-debugging y acepta el diálogo de permiso cuando el agente intente conectarse.# Conectar a una sesión activa de Chrome npx -y chrome-devtools-mcp@latest --autoConnectAdvertencia: Con --autoConnect el agente puede leer cookies y sesiones activas. Úsalo solo en perfiles de desarrollo, nunca en tu perfil personal.3. Las Herramientas DisponiblesEl servidor expone 45 herramientas divididas en categorías. Las más útiles en el día a día:| Categoría | Herramientas clave | |---|---| | Automatización | click, fill_form, type_text, drag, hover | | Navegación | navigate_page, wait_for, list_pages | | Performance | performance_start_trace, performance_stop_trace, performance_analyze_insight | | Red | get_network_request, list_network_requests | | Inspección | evaluate_script, list_console_messages, take_screenshot | | Memoria | take_heapsnapshot, get_heapsnapshot_summary | | Emulación | emulate, resize_page |4. Casos de Uso RealesA. Auditoría de Core Web VitalsEl agente puede simular condiciones de red degradadas y analizar métricas como LCP (Largest Contentful Paint) e INP (Interaction to Next Paint) con datos reales del navegador, no estimaciones.Prompt de ejemplo:Navega a http://localhost:3000, emula una conexión Slow 3G, inicia un performance trace, recarga la página, detén el trace y dime qué está bloqueando el LCP.Lo que el agente ejecuta internamente:await navigate_page({ url: "http://localhost:3000" }); await emulate({ network: "slow3G" }); await performance_start_trace(); await navigate_page({ url: "http://localhost:3000" }); await performance_stop_trace(); const insight = await performance_analyze_insight();Si detecta una imagen hero con loading="lazy" bloqueando el LCP, propone el fix directo:// Antes — el navegador retrasa la carga de esta imagen <Image src="/hero.webp" alt="Hero" loading="lazy" /> // Después — precargada como recurso crítico <Image src="/hero.webp" alt="Hero" priority />B. Persistir Cambios del Inspector al Código FuenteAjustas márgenes en el inspector de Chrome, refrescas, y el cambio desaparece. Con el agente conectado, haces el ajuste visual en el navegador y luego pides:Acabo de cambiar el padding del componente Card en el inspector. Extrae los estilos actuales del DOM y actualiza el archivo de estilos.El agente ejecuta:// Extrae los estilos computados del elemento modificado const styles = await evaluate_script({ expression: ` const el = document.querySelector('.card'); const computed = window.getComputedStyle(el); return { padding: computed.padding, borderRadius: computed.borderRadius, boxShadow: computed.boxShadow }; ` }); // Luego localiza el archivo de estilos correspondiente y aplica el diffC. QA Automatizado y Detección de Errores SilenciososErrores que solo ocurren bajo interacciones específicas — flujos OAuth, carritos con descuentos combinados, formularios multipaso — son los más costosos de encontrar. El agente puede ejecutar el flujo completo y monitorear consola y red en paralelo:Completa el flujo de checkout: agrega el producto 42 al carrito, aplica el cupón PROMO10, paga con la tarjeta de prueba 4242 4242 4242 4242, y reporta cualquier error en consola o red.await navigate_page({ url: "http://localhost:3000/product/42" }); await click({ selector: "#add-to-cart" }); await navigate_page({ url: "http://localhost:3000/cart" }); await fill_form({ selector: "#coupon-input", value: "PROMO10" }); await click({ selector: "#checkout-btn" }); // Captura errores de red durante todo el flujo const requests = await list_network_requests(); const failedRequests = requests.filter(r => r.status >= 400); // Captura errores de consola const logs = await list_console_messages(); const errors = logs.filter(log => log.type === "error");Si un endpoint responde con HTTP 500, el agente captura el stack trace a través de source maps, lo correlaciona con el código fuente y propone el fix.D. Detección de Fugas de MemoriaLas fugas de memoria en SPAs son difíciles de diagnosticar manualmente. El agente puede comparar heap snapshots antes y después de una secuencia de navegación:Navega entre /dashboard y /reports 10 veces y dime si hay una fuga de memoria.// Snapshot inicial await take_heapsnapshot(); const before = await get_heapsnapshot_summary(); // Simular navegación repetida for (let i = 0; i < 10; i++) { await navigate_page({ url: "http://localhost:3000/dashboard" }); await navigate_page({ url: "http://localhost:3000/reports" }); } // Snapshot final y comparación await take_heapsnapshot(); const after = await get_heapsnapshot_summary(); // El agente compara retainers y reporta objetos que no fueron liberados5. Seguridad: Lo que No Puedes IgnorarAislamiento de perfiles obligatorio. Si el agente tiene acceso simultáneo a tu terminal y a tu navegador personal, un ataque de prompt injection desde una web maliciosa podría leer cookies de sesión, tokens de autenticación, o extraer información de formularios con credenciales guardadas. Usa siempre un perfil de Chrome dedicado para desarrollo:# Crear y usar un perfil aislado de Chrome google-chrome --user-data-dir=/tmp/dev-profile --no-first-runEvita la contaminación de contexto. No agregues todos los servidores MCP disponibles a tu workspace. Cada servidor adicional consume tokens del contexto del modelo y degrada la precisión de sus decisiones. Configura solo los servidores relevantes para la tarea actual — un workspace de debugging frontend no necesita el MCP de base de datos ni el de GitHub al mismo tiempo.ConclusiónLa depuración web ha evolucionado de una inspección artesanal a un flujo de trabajo automatizado y continuo de observabilidad agéntica. Al dotar a los modelos de lenguaje con la capacidad de interactuar directamente con el motor de renderizado y las herramientas internas de Chrome, cerramos la brecha entre la intención de diseño y la ejecución en el mundo real. Los desarrolladores que adopten este flujo interactivo no solo reducirán drásticamente el tiempo empleado en cazar bugs repetitivos, sino que elevarán el estándar de optimización y confiabilidad de sus aplicaciones a niveles sin precedentesProfile@khriztianmoreno en Twitter y GitHu

Presentando Chrome DevTools MCP

2025-09-30
javascriptchromedevtoolsaimcpdebuggingperformancechrome-devtools

Participé en el programa de acceso anticipado (Early Access Program) de Chrome DevTools MCP y puse a prueba la funcionalidad en proyectos reales. Me enfoqué en cuatro escenarios: corregir un problema de estilos, ejecutar trazas de rendimiento y extraer insights, depurar una solicitud de red fallida y validar que los assets tengan encabezados de caché óptimos. En este post comparto esa experiencia práctica: qué funcionó, dónde brilla y cómo lo usaría en el día a día.Chrome DevTools MCP proporciona a los asistentes de codificación con IA visibilidad real en un navegador Chrome activo para que puedan inspeccionar, probar, medir y corregir problemas basados en señales reales, no en suposiciones. En la práctica, esto significa que tu agente puede abrir páginas, hacer clic, leer el DOM, recopilar trazas de rendimiento, analizar peticiones de red y perfeccionar soluciones en un ciclo cerrado.Por qué es importanteLa mayoría de los agentes de codificación son ciegos. Proponen código, pero no pueden ver la UI renderizada, la consola, las cascadas de red o los problemas de layout thrashing. Chrome DevTools MCP elimina esa venda conectando cualquier cliente AI habilitado para MCP (por ejemplo, Cursor, Claude Code, Gemini CLI) a una instancia local de Chrome con superpoderes a nivel de DevTools. El resultado es un flujo de trabajo donde el agente puede implementar un cambio, ejecutarlo en Chrome, observar el resultado y refinarlo.Introducción rápida: ¿Qué es MCP?MCP (Model Context Protocol) es un estándar abierto (de Anthropic) que define cómo los asistentes de IA se conectan a herramientas y fuentes de datos mediante una interfaz consistente. Un servidor MCP expone "herramientas" (capacidades). Un cliente MCP (tu asistente de IA) llama a esas herramientas. Chrome DevTools MCP es un servidor MCP que conecta un asistente de IA con DevTools de Chrome y su superficie de automatización.Puppeteer para confiabilidad: El servidor MCP utiliza Puppeteer para manejar la navegación, esperar a selectores, inactividad de red, diálogos, etc. Obtienes un control del navegador robusto y de nivel de producción en lugar de los peligros del CDP puro.Capa de herramientas MCP: El servidor expone herramientas de alto nivel (por ejemplo, navigate_page, click, performance_start_trace) a través de MCP. Tu AI llama a una herramienta; el servidor traduce eso en automatización de Chrome confiable y devuelve resultados estructurados.Chrome local y aislado: Se ejecuta localmente con un directorio de datos de usuario separado o perfiles efímeros completamente aislados. Puedes adjuntarte a un Chrome existente o iniciar una nueva instancia, en modo headless o visible.Capacidades clave (herramientas seleccionadas)Navegación y ciclo de vida: new_page, navigate_page, wait_for, avance/retroceso, listar páginas abiertas.Interacción de usuario: click, fill, fill_form, hover, drag, handle_dialog, upload_file.DOM y scripting: evaluate_script, take_snapshot, take_screenshot, list_console_messages.Red: list_network_requests, get_network_request para introspección de solicitudes/respuestas.Emulación: emulate_cpu, emulate_network, resize_page para restricciones de dispositivo/red.Rendimiento: performance_start_trace, performance_stop_trace, performance_analyze_insight para extraer métricas como LCP y TBT de trazas reales.Estas son primitivas a nivel de DevTools: puedes reproducir flujos de usuario reales y obtener la misma fidelidad que tendrías al depurar manualmente en Chrome.Flujos de trabajo prácticos que utilizaría en proyectos realesA continuación se presentan flujos probados en batalla que entregaría a un asistente de IA cuando trabajo en aplicaciones frontend a escala.1) Verificar una corrección de UI de extremo a extremoAplicar el parche (PR del agente o cambio local).navigate_page a la URL de vista previa.click o fill para reproducir la ruta del error.take_screenshot del estado roto para la línea base.Aplicar la corrección; recargar; repetir pasos 2–4.Comparar capturas de pantalla y list_console_messages para regresiones.Por qué es útil: reemplaza las pruebas manuales con un bucle determinista que el agente puede ejecutar repetidamente en diferentes páginas y puntos de interrupción.2) Detectar y explicar errores de ejecución rápidamentenavigate_page a la ruta fallida.list_console_messages y evaluate_script para inspeccionar el estado.list_network_requests + get_network_request para confirmar el estado del backend, payload, CORS y tiempos.Proponer corrección con contexto (marcos de pila, respuestas erróneas, encabezados mal configurados).Por qué es útil: tu agente deja de adivinar—los errores están fundamentados en la actividad real de la consola y la red.3) Reproducir recorridos críticos de usuario antes de implementarnew_page a staging.fill_form para iniciar sesión, click CTA, navegar por el checkout.take_screenshot en cada paso para aceptación visual.emulate_network 3G-lento y volver a intentar el flujo para la resiliencia.Por qué es útil: ejecuciones E2E realistas y repetibles que puedes adjuntar a los PRs.4) Depuración de estilos y layout en la que puedes confiartake_snapshot y evaluate_script para extraer estilos computados para un componente problemático.Aplicar parche de estilo; take_screenshot en múltiples tamaños de viewport mediante resize_page.Validar riesgo de CLS y problemas de desbordamiento.Por qué es útil: previene el "funciona en mi máquina" al basarse en el renderizado real.5) Triaje de rendimiento sin salir de tu editor performance_stop_trace + performance_analyze_insight para extraer señales y bloqueadores de LCP/TBT/CLS.Recomendar optimizaciones específicas (por ejemplo, precarga de imágenes, división de código basada en rutas, eliminar tareas largas, diferir la hidratación no crítica).Por qué es útil: integra una auditoría estilo Lighthouse en tu ciclo de agente con especificidad basada en trazas.Patrones avanzados para equipos seniorArnés de regresión: Codifica los recorridos principales (inicio de sesión, búsqueda, checkout) como secuencias MCP. Ejecuta en cada PR con capturas de pantalla + registros de consola/red adjuntos a los artefactos de CI.Presupuestos de rendimiento: Falla CI si performance_analyze_insight excede los presupuestos para LCP/TBT; incluye trazas como evidencia.Contratos de red: Usa get_network_request para validar esquemas y encabezados de caché; marca sorpresas (por ejemplo, falta de cache-control, JSON sobredimensionado o sobre-fetching).Verificaciones de accesibilidad: Combina evaluate_script para consultar heurísticas de ARIA y contraste; captura screenshots para diferencias visuales.Seguridad y restricciones a tener en cuentaTrata al navegador automatizado como un perfil separado. Evita navegar a sesiones de producción sensibles con sesión iniciada.Prefiere perfiles efímeros/aislados para ejecuciones reproducibles.Sé explícito sobre los datos de prueba y los entornos para prevenir efectos secundarios en sistemas reales.Primeros pasos (nivel alto)El repositorio documenta los detalles de instalación y configuración. A alto nivel:Instala el servidor Chrome DevTools MCP (paquete de Node.js).Configura tu cliente habilitado para MCP (Cursor, Claude Code, Gemini CLI) para registrar el servidor DevTools MCP.Inicia tu cliente; generará/se conectará a una instancia de Chrome cuando se invoquen herramientas.Llama a herramientas desde la interfaz del cliente o mediante prompts (por ejemplo, “abrir página, hacer clic en botón, recopilar traza de rendimiento”).Ejemplo de llamadas a herramientas MCP que podrías orquestar en una sesión:navigate_page -> wait_for(selector) -> click(selector) -> list_console_messages -> take_screenshot -> performance_start_trace -> trigger_interaction -> performance_stop_trace -> performance_analyze_insightConsulta la documentación oficial y el repositorio para obtener la lista más reciente de herramientas, flags y opciones de configuración.Cuándo recurrir a estoSi ya te apoyas en un asistente de IA para cambios de código, agrega DevTools MCP siempre que la corrección deba fundamentarse en el navegador: correcciones visuales/UI, interacciones inestables, depuración de tiempo de ejecución y red, y cualquier cosa relacionada con el rendimiento.ReferenciasAnuncio y documentación de Chrome DevTools MCPDescripción general del Model Context Protocol (MCP)Puppeteer y Chrome DevTools Protocol (CDP)¡Espero que esto haya sido útil y/o te haya enseñado algo nuevo!Profile@khriztianmoreno �