Chrome DevTools per gli agenti consente all'agente di verificare i layout reattivi, testare le API sensibili alla posizione e simulare velocità di CPU o di rete diverse. Utilizza questi strumenti per identificare i casi limite e automatizzare in modo più efficace i controlli del rendimento.
Queste funzionalità di emulazione funzionano con altri strumenti che consentono all'agente di interagire con il tuo sito, ad esempio facendo clic sugli elementi, compilando i moduli e navigando nelle pagine.
Le cose che puoi emulare includono:
- Viewport e user agent: emula dimensioni dello schermo e identificatori di dispositivo specifici.
- Geolocalizzazione:simula le coordinate della posizione per testare le API basate sulla posizione.
- Rete e CPU:limita le condizioni di rete e la velocità della CPU per simulare i vincoli di prestazioni reali.
- Combinazione di colori:passa dalla modalità Chiaro alla modalità Buio e viceversa.
Quando utilizzi l'emulazione, tieni presente quanto segue:
- Supporto dei dispositivi: l'agente può emulare qualsiasi dispositivo nell'elenco
KnownDevicesdi Puppeteer. Ciò include la simulazione di eventi touch per le finestre di visualizzazione mobile. - Comportamento del motore del browser: sebbene lo strumento emuli le caratteristiche del dispositivo, non simula motori del browser non Chromium o sistemi operativi diversi. L'agente viene sempre eseguito in Chrome nel sistema operativo corrente.
Casi d'uso per l'emulazione utente
Chiedi al tuo agente di emulare gli ambienti e verificare l'interfaccia utente per te, anziché ridimensionare manualmente i browser, falsificare gli IP o limitare le reti dopo ogni modifica del codice.
Integra l'emulazione nel tuo processo di sviluppo con questi flussi di lavoro.
Iterare sul responsive design
I pattern di navigazione spesso cambiano drasticamente tra i fattori di forma mobile e desktop. Mentre crei l'applicazione, puoi chiedere all'agente di verificare che i componenti appena scritti vengano visualizzati correttamente e forniscano gli stessi contenuti su tutti i dispositivi.
Prompt di esempio:
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.
Esecuzione dell'agente di esempio: l'agente apre una finestra di Chrome, va alla pagina, avvia l'emulazione e confronta gli elementi in entrambe le finestre. Conferma che la visualizzazione mobile (menu a tre linee) e la visualizzazione desktop (intestazione) contengono i link previsti.
Convalidare le interazioni tra viewport
I layout si interrompono durante le interazioni, non solo nel CSS. Gli screenshot statici spesso non rilevano bug che si verificano quando gli utenti toccano effettivamente la UI. Puoi chiedere al tuo agente di testare flussi di interazione specifici in più viewport per rilevare bug funzionali nascosti.
Prompt di esempio:
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.
Esecuzione dell'agente di esempio:l'agente digita una query di ricerca e ridimensiona lo schermo in base a ciascuna delle tre dimensioni. In questo esempio, l'agente rileva che su tablet e dispositivi mobili, la barra di ricerca si espande per riempire l'intera larghezza dell' intestazione, oscurando il link Accedi.
Prototipare funzionalità basate sulla posizione
Il test delle API che si basano sulla posizione fisica dell'utente (come le ricerche "Vicino a me" o i localizzatori di negozi) di solito richiede di ignorare manualmente i sensori. Ora puoi istruire l'agente a simulare geolocalizzazioni specifiche per verificare la logica di frontend e backend senza problemi.
Prompt di esempio:
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.
Esecuzione dell'agente di esempio: l'agente va al sito, cerca Berlino e poi inserisce dinamicamente coordinate di latitudine e longitudine specifiche per simulare Parigi, prima di interagire con la funzionalità Usa la mia posizione per assicurarsi che vengano visualizzati i negozi corretti.