Chrome DevTools for Agents consente all'agente di verificare i layout adattabili, testare le API basate sulla località e simulare varie velocità di CPU o di rete. Utilizza questi strumenti per identificare i casi limite e automatizzare in modo più efficace gli audit delle prestazioni.
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 tra le pagine.
Di seguito sono riportati alcuni elementi che puoi emulare:
- Viewport e user agent: Emula dimensioni dello schermo e identificatori di dispositivi specifici.
- Geolocalizzazione: simula le coordinate della località per testare le API basate sulla località.
- Rete e CPU: limita le condizioni di rete e la velocità della CPU per simulare i vincoli di prestazioni del mondo reale.
- Combinazione di colori: passa dalla modalità chiara alla modalità Buio.
Quando utilizzi l'emulazione, tieni presente quanto segue:
- Supporto dei dispositivi: l'agente può emulare qualsiasi dispositivo nell'elenco Puppeteer's
KnownDevices. È inclusa la simulazione degli eventi touch per i viewport mobile. - Comportamento del motore del browser: sebbene lo strumento emuli le caratteristiche del dispositivo, non simula i motori dei browser non Chromium o i sistemi operativi diversi. L'agente viene sempre eseguito in Chrome nel sistema operativo corrente.
Casi d'uso per l'emulazione dell'utente
Chiedi all'agente di emulare gli ambienti e verificare l'interfaccia utente per te, anziché ridimensionare manualmente i browser, simulare gli indirizzi IP o limitare le reti dopo ogni modifica del codice.
Integra l'emulazione nel processo di sviluppo con questi flussi di lavoro.
Itera sul responsive design
I pattern di navigazione spesso cambiano drasticamente tra i fattori di forma mobile e desktop. Quando 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.
Testo 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, passa alla pagina, avvia l'emulazione e confronta gli elementi in entrambi i viewport. Conferma che la visualizzazione mobile (menu hamburger) e la visualizzazione desktop (intestazione) contengono i link previsti.
Convalida le interazioni tra i viewport
I layout si interrompono durante le interazioni, non solo nel CSS. Gli screenshot statici spesso non rilevano i bug che si verificano quando gli utenti toccano effettivamente l'interfaccia utente. Puoi chiedere all'agente di testare flussi di interazione specifici su più viewport per rilevare bug funzionali nascosti.
Testo 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 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.
Prototipa le funzionalità basate sulla località
Il test delle API che si basano sulla posizione fisica dell'utente (ad esempio le ricerche "Vicino a me" o i localizzatori di negozi) in genere richiede di sostituire manualmente i sensori. Ora puoi chiedere all'agente di simulare posizioni geografiche specifiche per verificare senza problemi la logica frontend e backend.
Testo 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 passa al sito, cerca Berlino, quindi inserisce dinamicamente coordinate di latitudine e longitudine specifiche per emulare Parigi, prima di interagire con la funzionalità Usa la mia posizione per assicurarsi che vengano visualizzati i negozi corretti.