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.