Chrome DevTools MCP: evidencia real, alcance explícito y verificación
Primer ejercicio Chrome DevTools MCP: identificar, observar, actuar y verificar
Practica con una página sintética e identificadores actuales sin confundir clics exitosos con tareas completadas.
Qué aprenderás
- Elegir un comportamiento observable inocuo
- Observar antes de actuar
- Mantener acotadas las modificaciones
Antes de empezar
- Consola y red del navegador básicas
- Argumentos CLI y configuración de clientes locales
Planificar una investigación acotada y separar valores de interfaz, éxito operativo y aceptación integral.
Conclusiones clave
- Los IDs deben proceder de observaciones actuales.
- Argumentos obligatorios y flags opcionales difieren.
- Verifica el comportamiento después de actuar.
Elegir un comportamiento observable inocuo
Usa una página local autorizada con un botón contador, sin cuentas, pagos ni envíos externos. Define el resultado: un clic incrementa una vez el contador visible. Es un escenario didáctico, no una afirmación de haber creado o probado esa página aquí.
Enumera páginas e identifica el objetivo. La configuración de esta revisión activa enrutamiento por ID de página por defecto. El número es una observación del estado actual, no un identificador que debas copiar permanentemente de otro tutorial.
Observar antes de actuar
Lee una instantánea actual y usa el identificador del elemento pertinente. Las órdenes CLI de página reciben argumentos obligatorios posicionales y opciones mediante flags. Consulta ayuda instalada en lugar de suponer equivalencia directa con argumentos JSON de MCP.
Tras el clic autorizado, inspecciona el estado nuevo y compáralo con aceptación. Si no cambia o aumenta dos veces, una respuesta de transporte exitosa resulta insuficiente. Recoge evidencia de consola o red antes de atribuir una causa.
Mantener acotadas las modificaciones
Una exploración no debe enviar formularios ajenos ni modificar cuentas reales. Las acciones pueden tener efectos más allá del objetivo visual. Conserva la muestra aislada y pide nueva autoridad si el diagnóstico exige una acción externa materialmente distinta.
La hoja deja objetivo y resultado desconocidos deliberadamente. No conectamos este espacio a Chrome ni ejecutamos la interacción. Enseña observación, acción y verificación sin inventar una transcripción de ejecución.
Cómo elegir
| Criterio | Opción A | Opción B |
|---|---|---|
| Best when | You need predictable behavior and easy auditing | You need adaptive optimization and have reliable telemetry |
| Main risk | May leave performance on the table | Can become difficult to explain or debug |
Pasos de implementación
- 1
Elige la página sintética autorizada.
- 2
Obtén IDs actuales de página y elemento.
- 3
Realiza solo la acción acotada.
- 4
Compara resultado y aceptación.
Ejemplo para copiar
{
"escenarioSintetico": true,
"idPagina": null,
"idElemento": null,
"cambioEsperado": 1,
"cambioObservado": null,
"interaccionEjecutada": false
}Preguntas frecuentes
¿Puedo reutilizar la página 1 de un ejemplo?
Solo si la enumeración actual confirma que es tu objetivo.
¿Un clic exitoso demuestra éxito de la tarea?
No. Comprueba el comportamiento resultante de la aplicación.
Fuentes
- Chrome DevTools MCP / docs/configuration.mdFuente verificada 2026-09-14
- Chrome DevTools MCP / docs/cli.mdFuente verificada 2026-09-14
- Chrome DevTools MCP / README.mdFuente verificada 2026-09-14