Chrome acaba de convertirse en el navegador definitivo para Agentes (¡Por fin!)

BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00Por fin, el equipo de Chrome ha lanzado una actualización que permite que el servidor MCP
00:00:06de Chrome DevTools se comunique con una instancia de Chrome en ejecución para, por ejemplo,
00:00:12depurar errores tras una página de inicio de sesión, analizar una sesión en vivo e incluso
00:00:17hacer cosas de depuración geniales como acceder a elementos seleccionados, errores específicos y actividad de red.
00:00:21Pero con otras herramientas de depuración de IA como Agent Browser y Playwright, que añaden una CLI
00:00:26con habilidades y un servidor MCP, ¿es esto algo que el MCP de Chrome DevTools tendrá
00:00:31que incorporar en el futuro?
00:00:33Suscríbete y vamos a descubrirlo.
00:00:35Hace unos meses, Anjis publicó un video con una excelente visión general del servidor MCP
00:00:44de Chrome DevTools, pero en ese momento solo podía iniciar una nueva sesión de Chrome,
00:00:49o podías conectarlo a un puerto de depuración remota, pero requería mucha configuración manual.
00:00:53Ahora, en Chrome versión 144 o superior, con el flag de depuración remota activado, la herramienta
00:00:58MCP de Chrome detectará automáticamente una sesión abierta para depurar, lo cual para mí
00:01:04lo cambia todo, ya que prefiero usar Claude Code en la terminal. Esto significa que ya no
00:01:09tengo que usar navegadores de IA como Deer o Comet, ni la extensión de Chrome de Claude,
00:01:15ni herramientas de depuración de IA útiles como React Grab.
00:01:18Veamos estas nuevas funciones del MCP de Chrome DevTools en acción.
00:01:22Primero, necesitarás tener instalado el servidor MCP con la opción de autoconexión disponible.
00:01:27Yo uso Open Code, pero esto admite muchos entornos de agentes. Dentro de Chrome, tendrás
00:01:31que ir a esta URL y asegurarte de tener esta opción activada.
00:01:36Antes, tenías que iniciar una sesión con un comando como este y el agente se
00:01:40conectaba al puerto expuesto mediante HTTP.
00:01:43Pero con el nuevo método en esta interfaz, puedes iniciar Chrome normalmente, con acceso
00:01:48a tus cookies e historial, y simplemente apagarlo cuando hayas terminado.
00:01:53Si te preocupa la seguridad, más adelante en el video te mostraré cómo conectarte
00:01:57a una versión de Chrome más privada.
00:01:59Tras hacer esas dos cosas (activar la opción y conectar al servidor MCP
00:02:04con la opción de autoconexión), eso debería ser todo.
00:02:08Puedo pedirle a mi agente que revise el rendimiento de Betastack y, en Chrome, aparecerá
00:02:12un aviso preguntando si quiero permitir la depuración remota y veré este banner arriba.
00:02:17El agente ha podido navegar al sitio de Betastack y ahora está usando la
00:02:21herramienta de auditoría Lighthouse para darme métricas web, puntuaciones y otros detalles.
00:02:27Pero hagamos algo realmente útil.
00:02:29Aquí tengo una aplicación para aprender idiomas en la que estoy trabajando.
00:02:31He iniciado sesión como admin, he ido a contenido, a una unidad y a este ejercicio.
00:02:37He notado que en el modal del ejercicio, el botón de guardado de aquí abajo es diferente
00:02:42al resto de botones del sitio.
00:02:44Así que, en lugar de pedirle al agente que replique mis pasos (iniciar sesión e ir
00:02:49a esta página específica), voy a seleccionar este botón de guardado en las herramientas de inspección
00:02:55y preguntarle al agente si puede ver el elemento que he seleccionado.
00:02:58Tras un momento, es capaz de ver que tengo seleccionado el botón de guardado.
00:03:02Ahora le pediré que cambie el estilo del botón de guardado para que se parezca al de
00:03:06nuevo ejercicio, que es el botón que ven por aquí.
00:03:09En unos segundos, ha cambiado el estilo del botón exactamente como yo quería.
00:03:13Si ejecutas el servidor MCP en un entorno de sandbox, tendrías que usar la opción
00:03:18de URL del navegador con el puerto para depuración remota como HTTP, no WebSockets.
00:03:23Y si eres cauteloso con la seguridad, deberás añadir el directorio de datos de usuario
00:03:28con una ubicación específica al servidor MCP, lo que hará que los agentes no tengan
00:03:33acceso a tus cookies, contraseñas o historial de navegación actuales.
00:03:36Tendrías que volver a iniciar sesión en esos sitios si quieres que el agente acceda a ellos.
00:03:41Por muy genial que sea esto, si han visto mis videos anteriores, sabrán que no soy
00:03:46muy fan de los servidores MCP porque consumen mucho contexto si tienes
00:03:51demasiados instalados.
00:03:52Por suerte, el servidor MCP de Chrome DevTools permite hacerlo todo mediante una CLI,
00:03:59algo que pocos conocen porque está algo oculto; tienes que entrar en
00:04:04el directorio de habilidades y luego en Chrome DevTools CLI para encontrar esta función experimental,
00:04:10que le da al agente información sobre cómo utilizarla.
00:04:12También incluye instrucciones de instalación por si aún no lo has hecho.
00:04:16Básicamente es una capa ligera sobre el servidor MCP.
00:04:20Si ya lo tienes ejecutándose en un entorno de agentes, esta CLI no lo usará,
00:04:24ya que utiliza su propio demonio.
00:04:26Este comando da información sobre el demonio predeterminado y verán que ya
00:04:30ha configurado el flag de la URL del navegador con otros como headless e isolated.
00:04:34Pero notarás que no hay opción de autoconexión en las opciones disponibles de la CLI.
00:04:39Si no has ejecutado Chrome vía terminal, tendrías que cerrar el actual y luego
00:04:43ejecutarlo así, asegurándote de que si usas el flag del puerto de depuración remota,
00:04:48también incluyas el flag de datos de usuario.
00:04:50Con eso listo, puedo iniciar el demonio, obtener la lista de páginas, que ahora
00:04:54solo muestra una pestaña nueva porque no hay mucho más de momento.
00:04:57Pero, por supuesto, el verdadero potencial surge al usarlo con un agente.
00:05:01Si desactivo la herramienta MCP de Chrome, selecciono este botón en DevTools y pido al agente
00:05:06que use la CLI para identificar el elemento seleccionado, vemos que puede lograrlo.
00:05:11Ten en cuenta que la información en el directorio de datos de usuario persiste entre sesiones,
00:05:15por lo que mantiene mis cookies, información del navegador y demás.
00:05:19Además, hay muchas más cosas que la CLI de Chrome DevTools puede hacer.
00:05:22Recomiendo que revisen la habilidad; quizás en el futuro introduzcan
00:05:26la función de autoconexión.
00:05:28Ahí lo tienen: un repaso rápido por las nuevas funciones del servidor MCP
00:05:32de Chrome DevTools y su CLI, que sin duda mejorarán tu experiencia de depuración
00:05:38con asistentes de código.
00:05:39Como usuario de Arc (sí, sigo usándolo), desearía que esta función llegue allí pronto.
00:05:45Pero mientras tanto, estoy feliz usando el Agent Browser de Vassal, que me ha
00:05:50estado funcionando muy bien.
00:05:51Si no conocen Agent Browser, echen un vistazo al video que hice hace un tiempo,
00:05:55aunque ha mejorado mucho desde entonces.
00:05:58Quizás sea hora de que haga otro video al respecto.

Key Takeaway

La nueva actualización de Chrome DevTools y su servidor MCP revoluciona la interacción de agentes de IA con el navegador al permitir la conexión fluida con sesiones reales y la manipulación directa de elementos web.

Highlights

Chrome lanzó una actualización del servidor MCP (Model Context Protocol) que permite la conexión directa con instancias de Chrome en ejecución.

La versión 144 de Chrome o superior facilita la depuración remota automática sin necesidad de configuraciones manuales complejas.

Los agentes de IA ahora pueden acceder a cookies, historial y sesiones activas, permitiendo depurar detrás de muros de inicio de sesión.

Es posible seleccionar elementos específicos en el inspector de elementos y que el agente de IA los reconozca y modifique instantáneamente.

El servidor MCP de Chrome DevTools incluye una interfaz de línea de comandos (CLI) oculta para entornos con poco contexto.

Existen opciones de configuración de seguridad para aislar los datos del usuario mediante directorios de datos específicos.

La integración con herramientas como Claude Code potencia el flujo de trabajo de desarrollo directamente desde la terminal.

Timeline

Introducción y Novedades del Servidor MCP

El equipo de Chrome ha actualizado el servidor MCP de DevTools para permitir la comunicación directa con una instancia del navegador abierta por el usuario. Esta mejora es fundamental porque permite realizar tareas de depuración complejas, como analizar errores tras un inicio de sesión o acceder a la actividad de red en vivo. Anteriormente, conectar un agente a Chrome requería una configuración manual tediosa de puertos de depuración remota. Ahora, a partir de la versión 144, el proceso se automatiza mediante un flag de depuración, eliminando la necesidad de herramientas intermedias como extensiones específicas de Claude. Este avance representa un cambio de paradigma para los desarrolladores que prefieren usar agentes de IA en la terminal.

Configuración y Demostración Técnica

Para activar estas funciones, el usuario debe instalar el servidor MCP con la opción de autoconexión y habilitar una configuración específica en las URLs internas de Chrome. Una de las mayores ventajas es que el navegador se puede iniciar normalmente, manteniendo el acceso a las cookies y al historial del usuario, lo cual facilita el trabajo en entornos reales. El video muestra cómo un agente de IA puede navegar a un sitio web como Betastack tras recibir permiso a través de un banner de depuración remota. Durante la prueba, el agente utiliza la herramienta de auditoría Lighthouse para extraer métricas de rendimiento y puntuaciones detalladas. Esta sección subraya la facilidad con la que se pueden integrar herramientas de diagnóstico profesional mediante comandos simples del agente.

Interacción con Elementos y Casos de Uso Reales

El presentador demuestra el poder de la herramienta aplicándola a una aplicación de aprendizaje de idiomas donde ya ha iniciado sesión como administrador. Al seleccionar un botón de guardado inconsistente en el inspector de elementos, el agente de IA es capaz de identificar exactamente qué elemento tiene seleccionado el usuario. El usuario le pide al agente que cambie el estilo del botón para que coincida con otro elemento de la interfaz, y el cambio se aplica de forma inmediata. Para aquellos preocupados por la privacidad, se explica cómo usar un directorio de datos de usuario aislado para evitar que el agente acceda a contraseñas personales. Esto ofrece un equilibrio entre la potencia de la automatización y la seguridad de la información sensible del desarrollador.

Exploración de la CLI y Conclusión

A pesar de las ventajas, el servidor MCP puede consumir mucho contexto, por lo que el video revela una CLI de Chrome DevTools algo oculta en el directorio de habilidades. Esta interfaz de línea de comandos funciona como una capa ligera que permite interactuar con el navegador sin sobrecargar el entorno del agente. Se muestra cómo el agente puede listar pestañas abiertas e identificar elementos seleccionados incluso cuando el servidor MCP principal está desactivado. Aunque la CLI aún no tiene la función de autoconexión automática de la versión de escritorio, su persistencia de datos la hace muy útil para sesiones largas. El video concluye mencionando alternativas como Agent Browser de Vassal y expresando el deseo de que estas funciones lleguen pronto a otros navegadores como Arc.

Community Posts

View all posts