Automatiza los flujos de trabajo repetibles del navegador con la CLI de las Herramientas para desarrolladores de Chrome

José Luis Zapata

Matthias Rohmer

Las Herramientas para desarrolladores de Chrome para agentes incluyen una interfaz de línea de comandos (CLI) que permite que tu agente de programación o tú ejecuten las Herramientas para desarrolladores como comandos de shell estándar. En lugar de llamar a las herramientas de forma dinámica a través del servidor de MCP, tu agente escribe las mismas acciones como comandos de shell y puede encadenarlas en una secuencia de comandos que puedes volver a ejecutar en cualquier momento. Por ejemplo, tu agente podría generar una secuencia de comandos como esta:

chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"

Tanto el servidor de MCP como la CLI se conectan al mismo motor: un daemon en segundo plano persistente que se comunica con Chrome a través del protocolo de Herramientas para desarrolladores de Chrome (CDP). La diferencia radica en cómo tu agente llega a ese motor:

• Servidor de MCP: Tu agente se conecta a través de la entrada estándar/salida estándar con JSON-RPC y trata cada herramienta del navegador como una llamada a función interactiva.
• CLI: Tu agente ejecuta comandos de shell directamente en el mismo daemon en segundo plano.

Puedes usar la CLI para hacer lo siguiente:

• Conservar un flujo de trabajo: Convierte las acciones que realizó tu agente durante una sesión de depuración exploratoria en una secuencia de comandos reutilizable.
• Reproduce el estado de una aplicación: Vuelve a ejecutar una secuencia de comandos para que el navegador vuelva a un estado conocido antes de volver a depurar.
• Acciones por lotes: Ejecuta una secuencia de comandos de navegación, entrada, emulación y inspección sin un turno de conversación entre cada paso.
• Ejecuta secuencias de comandos sin un agente de IA: Ejecuta las secuencias de comandos generadas desde cualquier terminal, subshell o contenedor de CI que pueda ejecutar secuencias de comandos de shell, sin necesidad de una sesión de LLM activa ni un cliente de MCP.

Elige entre la CLI y el servidor de MCP

Elegir entre la CLI y el servidor de MCP es una decisión de ingeniería sobre el costo, el contexto y el flujo de trabajo.

• Costo de la ventana de contexto: Cuando registras el servidor de MCP, cada definición de herramienta y esquema JSON se inserta en la instrucción del sistema de tu LLM en cada conversación. Con la habilidad de la CLI, tu agente solo carga un resumen compacto de Markdown y paga el costo de los tokens cuando decide leer la habilidad completa y construir los comandos que necesita. En el caso de las sesiones de agentes largas y de varios turnos, esa diferencia se suma tanto en el costo como en la latencia.
• Exploración frente a ejecución: Las herramientas de MCP se destacan en la depuración dinámica y exploratoria, cuando ni tú ni tu agente saben aún qué necesitan inspeccionar. Como tu agente conoce todas las herramientas disponibles de antemano, es más probable que las use para alcanzar su objetivo. Cuando ya se conoce la ruta, la CLI te permite ejecutar solo los pasos que necesitas.
• Reutilización: Puedes guardar un script de la CLI, reutilizarlo en una habilidad o ejecutarlo de forma manual fuera de un bucle de agente. No puedes hacer eso con las llamadas a herramientas de MCP.

Cuando uses la CLI, ten en cuenta lo siguiente:

• Cobertura de herramientas: La CLI admite la mayoría de las herramientas de las Herramientas para desarrolladores de Chrome para agentes para la automatización basada en shell. Para obtener la lista completa de comandos, consulta la referencia de habilidades de la CLI.
• Inicio implícito: El servidor en segundo plano se inicia automáticamente en el primer uso; no necesitas ejecutar start, status ni stop antes de cada comando.
• Estado persistente: El estado del navegador persiste entre los comandos, por lo que una página que abras en un comando seguirá disponible en el siguiente si no se cierra de forma explícita.
• IDs de página y UID de elementos: La mayoría de los comandos toman un ID de página como su primer argumento. Ejecuta chrome-devtools list_pages para encontrarlo y chrome-devtools take_snapshot para obtener los UID de los elementos con los que quieres interactuar.
• Formato de salida: El resultado se establece de forma predeterminada en texto sin formato similar a Markdown. Pasa --output-format=json si quieres consumir los resultados en otras canalizaciones de CI o secuencias de comandos.
• Acceso a archivos: De forma predeterminada, la CLI tiene acceso completo al sistema de archivos para los parámetros de guardado de archivos y upload_file. Pasa --allowUnrestrictedPaths=false para restringir el acceso a los archivos al directorio temporal del SO.
• Lighthouse en CI: Puedes ejecutar lighthouse_audit desde la CLI, pero la CLI de Lighthouse independiente y sus acciones de GitHub son más livianas si solo necesitas puntuaciones de Lighthouse en CI.
• Abstracción más simple que las secuencias de comandos de automatización del navegador: A diferencia de escribir secuencias de comandos completas de Puppeteer o Playwright en JavaScript o TypeScript, la CLI de DevTools proporciona una superficie de API limitada y muy segmentada. Esta sintaxis de shell es más fácil de leer y mantener para los humanos, y significativamente más fácil de generar de forma confiable, incluso para los modelos de nivel inferior, sin alucinaciones.

Requisitos previos

Antes de usar la CLI, asegúrate de tener lo siguiente:

• Herramientas para desarrolladores de Chrome para agentes instaladas: Sigue la guía de introducción. Los complementos y las extensiones específicos de los agentes (por ejemplo, la extensión de Gemini CLI) incluyen las habilidades de los agentes junto con el servidor de MCP.
• La CLI disponible en tu shell: La instalación es un paso único y no forma parte del flujo de trabajo habitual del agente. Consulta la referencia de instalación.
• La habilidad chrome-devtools-cli (instalada con las Herramientas para desarrolladores de Chrome para agentes): Esta habilidad le enseña a tu agente a escribir secuencias de comandos de shell o ejecutar comandos de shell con la CLI.

Estructura de los comandos

Los comandos siguen el patrón chrome-devtools <tool> [arguments] [flags]. Los argumentos obligatorios son posicionales y los opcionales usan marcas. Usa --help en cualquier comando para obtener detalles.

Por ejemplo:

chrome-devtools new_page "https://example.com"      # Open a page
chrome-devtools list_pages                          # Find the page ID
chrome-devtools take_snapshot 1                     # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello"                # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"

Casos de uso de la CLI de las Herramientas para desarrolladores de Chrome

Indícale a tu agente que capture los pasos que ya descubrió como una secuencia de comandos, en lugar de volver a resolver el mismo flujo del navegador en cada sesión.

Cómo conservar una sesión de depuración como una secuencia de comandos reutilizable

Después de una sesión de depuración exploratoria con MCP, no puedes garantizar que no vuelva a aparecer el mismo problema. En lugar de volver a explicar los pasos de reproducción la próxima vez, pídele al agente que escriba el flujo que acaba de ejecutar.

Instrucción de ejemplo:

Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.

Ejemplo de ejecución del agente: Tu agente revisa los pasos de navegación, entrada y inspección que realizó durante la sesión y los traduce en una secuencia de comandos chrome-devtools, por ejemplo, new_page, take_snapshot, fill, click y list_console_messages. Guarda la secuencia de comandos como test.sh. La próxima vez que depures esta área, puedes dirigir tu agente a la secuencia de comandos para volver al mismo estado o ejecutarla fuera de un bucle de agente para depurarla de forma manual.

Reproduce el estado de una aplicación antes de investigar

Los estados complejos, como un proceso de confirmación de compra de varios pasos o un panel filtrado, son costosos para que un agente los reconstruya de forma conversacional cada vez. Usa una secuencia de comandos guardada como punto de partida para una investigación nueva.

Instrucción de ejemplo:

Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.

Ejemplo de ejecución del agente: El agente ejecuta la secuencia de comandos, que navega a la confirmación de la compra, completa el formulario de dirección y selecciona una opción de envío. Debido a que el estado del navegador persiste en todos los comandos, tu agente usa take_snapshot y evaluate_script en la misma página para inspeccionar el estado del botón y los controladores de eventos adjuntos al selector de pagos.

Verificaciones visuales por lotes en viewports

Verificar un cambio de diseño en varios tamaños de pantalla es repetitivo y, por lo general, se hace de forma manual. Pídele a tu agente una secuencia de comandos que aplique la configuración de emulación y capture evidencia de cada una en una sola ejecución.

Instrucción de ejemplo:

Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.

Ejemplo de ejecución del agente: Tu agente escribe un bucle que llama a chrome-devtools emulate 1 --viewport "<size>" seguido de chrome-devtools take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png" para cada viewport. Puedes volver a ejecutar la secuencia de comandos después de cada cambio de CSS sin abrir una conversación.

Realizar una prueba de humo de un flujo en el que no haya ningún cliente de MCP disponible

Algunos entornos, como los contenedores de CI o las configuraciones empresariales bloqueadas, no admiten clientes de MCP. Prácticamente todas las terminales, subshells, contenedores de CI y frameworks de agentes admiten la ejecución de secuencias de comandos de shell estándar y la lectura de stdout, lo que hace que la CLI sea adecuada para verificaciones ligeras en esos lugares.

Instrucción de ejemplo:

Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.

Ejemplo de ejecución de un agente: Tu agente escribe una secuencia de comandos que usa new_page, take_snapshot, fill y click, luego llama a list_console_messages 1 --types error --output-format=json y analiza el resultado JSON para decidir el código de salida.

Empaqueta un flujo de trabajo como una habilidad ligera

Si un flujo es útil en varios proyectos o para varios compañeros de equipo, tu agente puede unir la secuencia de comandos en una habilidad. Esa es la habilidad de la CLI de DevTools: una referencia ligera que permite que tu agente ejecute comandos específicos del navegador sin pagar el costo inicial de tokens por todas las herramientas.

Instrucción de ejemplo:

Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.

Ejemplo de ejecución de un agente: Tu agente crea un SKILL.md con un nombre, una descripción de una línea de cuándo se aplica la habilidad y las instrucciones que hacen referencia a la secuencia de comandos. En sesiones posteriores, el agente lee la habilidad completa solo cuando la tarea coincide con su descripción.

Próximos pasos

• Para obtener la lista completa de comandos y marcas de la CLI, consulta la referencia de habilidades de la CLI.
• Para configurar el servidor subyacente (modo sin interfaz gráfica, canales y categorías experimentales), consulta Configuración.