Las Herramientas para desarrolladores de Chrome para agentes permiten que tu agente verifique diseños responsivos, pruebe APIs que detectan la ubicación y simule diversas velocidades de CPU o de red. Usa estas herramientas para identificar casos extremos y automatizar las auditorías de rendimiento de manera más eficaz.
Estas funciones de emulación funcionan con otras herramientas que permiten que tu agente interactúe con tu sitio, como hacer clic en elementos, completar formularios y navegar por las páginas.
Entre las cosas que puedes emular, se incluyen las siguientes:
- Ventana gráfica y agente de usuario: Emula tamaños de pantalla y dispositivos específicos.
- Geolocation: Suplanta las coordenadas de ubicación para probar las APIs que tienen en cuenta la ubicación.
- Red y CPU: Limita las condiciones de la red y la velocidad de la CPU para simular las restricciones de rendimiento del mundo real.
- Esquema de color: Alterna entre los modos claro y oscuro.
Cuando uses la emulación, ten en cuenta lo siguiente:
- Compatibilidad con dispositivos: Tu agente puede emular cualquier dispositivo de la lista de
KnownDevicesde Puppeteer. Esto incluye la simulación de eventos táctiles para ventanas gráficas de dispositivos móviles. - Comportamiento del motor del navegador: Si bien la herramienta emula las características del dispositivo, no simula motores de navegador que no sean Chromium ni sistemas operativos diferentes. Tu agente siempre se ejecuta en Chrome en tu sistema operativo actual.
Casos de uso para la emulación de usuarios
Indícale a tu agente que emule entornos y verifique la IU por ti, en lugar de que cambies el tamaño de los navegadores, suplantes IPs o limites redes de forma manual después de cada cambio de código.
Integra la emulación en tu proceso de desarrollo con estos flujos de trabajo.
Itera el diseño responsivo
Los patrones de navegación suelen cambiar drásticamente entre los factores de forma de dispositivos móviles y computadoras de escritorio. A medida que compilas tu aplicación, puedes indicarle a tu agente que verifique que los componentes que acaba de escribir se rendericen correctamente y proporcionen el mismo contenido en todos los dispositivos.
Ejemplo de instrucción:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
Ejemplo de ejecución del agente: Tu agente abre una ventana de Chrome, navega a la página, inicia la emulación y compara elementos en ambos puertos de visualización. Confirma que la vista para dispositivos móviles (menú de hamburguesa) y la vista para computadoras (encabezado) contienen los vínculos esperados.
Valida las interacciones en diferentes ventanas gráficas
Los diseños se rompen durante las interacciones, no solo en el CSS. Las capturas de pantalla estáticas suelen omitir errores que ocurren cuando los usuarios tocan la IU. Puedes asignarle a tu agente la tarea de probar flujos de interacción específicos en múltiples ventanas gráficas para detectar errores funcionales ocultos.
Ejemplo de instrucción:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
Ejemplo de ejecución del agente: Tu agente escribe una búsqueda y cambia el tamaño de la pantalla a cada uno de los tres tamaños. En este ejemplo, tu agente detecta que, en tablets y dispositivos móviles, la barra de búsqueda se expande para ocupar todo el ancho del encabezado, lo que oculta el vínculo Acceder.
Crea prototipos de funciones que reconocen la ubicación
Por lo general, probar las APIs que dependen de la ubicación física del usuario (como las búsquedas de "Cerca de mí" o los localizadores de tiendas) requiere que anules manualmente los sensores. Ahora puedes indicarle a tu agente que suplante ubicaciones geográficas específicas para verificar tu lógica de frontend y backend sin problemas.
Ejemplo de instrucción:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
Ejemplo de ejecución del agente: Tu agente navega al sitio, busca Berlín y, luego, inserta de forma dinámica coordenadas específicas de latitud y longitud para emular París antes de interactuar con la función Usar mi ubicación para garantizar que se muestren las tiendas correctas.