Chrome DevTools MCP

• El servidor Chrome DevTools MCP fue mejorado para permitir que los agentes de código se conecten directamente a una sesión activa del navegador
• Con esta función, los agentes pueden reutilizar sesiones con inicio de sesión activo o acceder a la sesión de depuración activa de DevTools
• En Chrome M144 (beta), al usar la opción --autoConnect, el servidor MCP se conecta automáticamente a una instancia de Chrome en ejecución
• Cada vez que se establece una conexión, se muestra un cuadro de aprobación del usuario y, durante la depuración, aparece el banner “automated test software” indicando que el navegador está siendo controlado
• Es posible cambiar libremente entre la depuración manual y la depuración asistida por IA, lo que mejora la eficiencia del desarrollo

---

Resumen de las mejoras del servidor Chrome DevTools MCP

• El servidor Chrome DevTools MCP se actualizó para permitir que los agentes de código se conecten directamente a una sesión activa del navegador
  • Los usuarios pueden reutilizar una sesión con inicio de sesión activo, por lo que pueden depurar sin volver a iniciar sesión
  • Se puede pedir al agente que investigue los elementos seleccionados en el panel Network o el panel Elements de la interfaz de DevTools
• También se mantienen los métodos de conexión existentes, como usar un perfil dedicado para el servidor MCP, conectarse a un puerto de depuración remota o ejecutar múltiples instancias basadas en perfiles temporales

Cómo funciona (How it works)

• Se agregó a Chrome M144 (actualmente en beta) la función de solicitud de conexión de depuración remota
  • Si el servidor MCP se ejecuta con la opción --autoConnect, se conecta automáticamente a la instancia activa de Chrome y solicita una sesión de depuración remota
• Para reforzar la seguridad, Chrome muestra un cuadro de aprobación del usuario en cada solicitud y solo permite la conexión después de la aprobación
• Cuando la sesión de depuración se activa, en la parte superior del navegador aparece el banner “Chrome is being controlled by automated test software”

Primeros pasos (Get started)

• Para usar la nueva función de depuración remota, debes habilitar la depuración remota en Chrome y configurar el servidor MCP

Step 1: Configurar la depuración remota en Chrome

• Ve a chrome://inspect/#remote-debugging y habilita la depuración remota
• Elige en el cuadro de diálogo si permites la conexión de depuración

Step 2: Configurar la conexión automática del servidor MCP

• Al ejecutar el servidor chrome-devtools-mcp, agrega el argumento --autoConnect
• Configuración de ejemplo (gemini-cli):

  {
     "mcpServers": {
      "chrome-devtools": {
        "command": "npx",
        "args": [
          "chrome-devtools-mcp@latest",
          "--autoConnect",
          "--channel=beta"
        ]
      }
    }
  }
  

  • Hasta que Chrome M144 llegue al canal estable, es necesario especificar --channel=beta

Step 3: Probar la configuración

• En gemini-cli, ejecuta el siguiente comando:

  Check the performance of https://developers.chrome.com
  

• Chrome mostrará un cuadro de diálogo preguntando al usuario si permite la sesión de depuración remota
• Al hacer clic en Allow, el servidor MCP abre el sitio y realiza un seguimiento del rendimiento

Depuración integrada con agentes de código

• Al conectarse a una instancia activa de Chrome, es posible combinar automatización y control manual
  • Después de que el usuario encuentre un elemento problemático en DevTools, puede pasárselo al agente de código y pedirle que lo corrija
  • En el panel Network, también se puede seleccionar una solicitud y pedir al agente que la analice
• A través del servidor Chrome DevTools MCP, se planea ampliar gradualmente el acceso a datos de paneles adicionales

[GN⁺]

Comentarios de Hacker News

• Yo uso Playwright para interceptar todas las solicitudes y respuestas, y registrar el tráfico relevante mientras Claude Code navega sitios como YouTube, haciendo clics e introduciendo texto
  Con los datos recopilados, genero automáticamente una API fuertemente tipada para poder interactuar con cualquier sitio web a través de su API interna
  Claro, probablemente viole los términos de servicio, pero la ventaja es que no hace falta cargar anuncios, imágenes ni todo el marcado
  Si a alguien le interesa, planeo publicarlo esta semana

  • Es interesante que a HN le guste esta idea
    En realidad, esto es algo que fabricantes de LLM como Anthropic u OpenAI ya vienen haciendo
    Es irónico que cuando ellos evitan anuncios o descargan obras con copyright sea un ‘regalo de Dios’, pero si Zuck hace lo mismo sea una ‘maldición del diablo’
  • Yo también lo uso de forma parecida
    Principalmente para reproducir el layout y los estilos de una página en puntos específicos del árbol DOM, o para capturar automáticamente comportamientos responsivos
    Ajusto el ancho de pantalla con Playwright mientras rastreo cambios de estilo, y guardo juntos capturas de pantalla y datos de jerarquía de estilos
    Hay herramientas de inspección manual, pero son demasiado lentas e ineficientes
    Personalmente, me parece mucho más eficiente crear directamente un CLI personalizado que usar MCP
    Lo realmente potente es que la IA acceda directamente y lo aproveche mediante ‘skills’
  • Me pregunto por qué habría que usar Playwright
    Parecería que Claude, con solo agent-browser, podría generar código determinista de inmediato
  • Ojalá de verdad lo publiques. Me da curiosidad si lo hiciste como agent skill
  • Con este enfoque, me pregunto si también se podrían descargar videos de YouTube directamente, sin necesidad de seguir actualizando algo como yt-dlp

• El proyecto DevTools MCP lanzó hace poco un CLI independiente
  Si miras la documentación de chrome-devtools-cli, viene incluido en la versión v0.20.0
  Es una buena noticia para quienes estaban preocupados por el costo en tokens de MCP
  (Como referencia, yo trabajaba en el equipo de DevTools y sigo trabajando ahí)

  • Ahora, gracias a Tool Search, MCP no cuesta en CC

• Yo he estado usando TideWave estos últimos meses
  tidewave.ai originalmente estaba basado en Elixir/LiveView, pero ahora también soporta frameworks de JS y RoR
  Esta herramienta no solo da acceso al navegador, sino también al runtime de la app
  O sea, el agente puede acceder directamente a la base de datos y a los endpoints, así que es muy potente

• Google está muy rezagado en eso del coding agentic por CLI
  Gemini CLI es tan malo que es obvio que ni ellos lo usan internamente
  MCP ya es una tecnología muerta. Las herramientas CLI son más rápidas y flexibles, y además ya hay muchos entornos entrenados
  Para cualquier desarrollador serio, lo correcto es usar Playwright y headless Chromium
  MCP solo resulta atractivo para principiantes

  • Yo trabajo en un entorno enterprise de gran escala, y por temas como autenticación, RBAC, rate limiting y gestión operativa, MCP sigue siendo útil
    Solo con CLI, la complejidad de seguridad y operación se vuelve demasiado grande
    Eso sí, coincido en que Gemini CLI es malísimo
  • Estoy de acuerdo con la idea de que MCP está muerto
    Anthropic intentó mejorarlo, pero el problema del inflado de contexto sigue ahí
    Aunque no uses los servidores MCP, igual ocupan contexto
    Ahora hay que pasarse a agent skill
  • Para que conste, Gemini CLI sí se usa bastante dentro de Google
    Usan servicios MCP para búsqueda de código, acceso a documentos, consulta de bugs y conexión a bases de datos RAG
    (Eso lo escuché directamente de gente dentro de Google)
  • Si MCP está muerto, entonces me pregunto con qué CLI se supone que hay que abrir Chrome, hacer clic en botones y leer la salida de la consola
    Y si MCP consume contexto, me pregunto si las skills de CLI salen gratis

• Ya existe una agent skill que implementa esta funcionalidad
  Uso chrome-cdp-skill todos los días y está buenísimo
  Por ejemplo, con codex pude administrar mi biblioteca local de música, abrir una pestaña de YT Music, buscar un álbum y pasar la URL a yt-dlp
  Eso sí, por ahora solo funciona con Chrome, así que si quieres usar otro navegador tienes que modificar la ruta del binario

  • Es una demo genial, pero me da miedo que con una sola inyección de prompt se pueda acceder a todos los datos
  • Esto no es una skill para DevTools MCP, sino un proyecto independiente
    El campo de automatización de navegadores + agentes ya está muy competido
    Como DevTools MCP y el nuevo CLI los mantiene el equipo de Chrome DevTools & Puppeteer, parece que serán más estables
    Aun así, está bueno que la competencia open source impulse la innovación
  • Me pregunto si de verdad hay gente usando skills tan improvisadas en la práctica
    Yo preferiría usar una herramienta estable como playwriter.dev

• Yo hice una extensión de Chrome + proxy WebSocket para que los agentes pudieran controlar el DOM
  Lo configuré para permitir acceso con cookies de sesión habilitadas mediante browserbox
  Por ahora lo estoy usando como middleware de investigación para mejorar la tasa de éxito del uso de herramientas por parte de agentes

• Llevo bastante tiempo usando este MCP, y me resultó más estable cuando lo usé junto con codex on opencode
  Sobre todo cuando lo usé como REPL de edición SVG, me sorprendió que generara automáticamente íconos personalizados muy buenos
  También encaja bien para ingeniería inversa o trabajos de extensión en apps Electron

• Probé playwriter, y la forma en que se conecta a una sesión existente funcionó sorprendentemente bien

• Yo también implementé algo parecido con Playwright
  Antes salía caro porque consumía muchísimos tokens, pero lo resolví creando un wrapper que guarda los resultados en disco y deja que el agente los consulte
  Se puede ver en uisnap.dev
  Me pregunto si este proyecto resolvió el problema del consumo de tokens

  • Parece que en su mayoría sí. Como referencia, mira playwright-cli
  • Yo uso un servidor MCP wrapper que resume snapshots de páginas con Claude Haiku
    Se puede ver en playwright-slim-mcp

• Probé firefox-devtools-mcp, y me pareció mucho más rápido y eficiente que el MCP base de Chrome