Chrome DevTools untuk agen memungkinkan agen Anda memverifikasi tata letak responsif, menguji API yang mendukung lokasi, dan menyimulasikan kecepatan CPU atau jaringan yang bervariasi. Gunakan alat ini untuk mengidentifikasi kasus ekstrem dan mengotomatiskan audit performa dengan lebih efektif.
Fitur emulasi ini berfungsi dengan alat lain yang memungkinkan agen Anda berinteraksi dengan situs Anda, seperti mengklik elemen, mengisi formulir, dan membuka halaman.
Hal yang dapat Anda emulasikan mencakup:
- Viewport dan user agent: Emulasikan ukuran layar dan ID perangkat tertentu.
- Geolocation: Spoof koordinat lokasi untuk menguji API yang mendukung lokasi.
- Network and CPU: Batasi kondisi jaringan dan kecepatan CPU untuk menyimulasikan batasan performa dunia nyata.
- Color scheme: Beralih antara mode terang dan gelap.
Saat menggunakan emulasi, perhatikan hal berikut:
- Dukungan perangkat: Agen Anda dapat mengemulasikan perangkat apa pun dalam daftar Puppeteer's
KnownDevices. Hal ini mencakup simulasi peristiwa sentuh untuk viewport seluler. - Browser engine behavior: Meskipun alat ini mengemulasikan karakteristik perangkat, alat ini tidak menyimulasikan mesin browser non-Chromium atau sistem operasi yang berbeda. Agen Anda selalu dieksekusi di Chrome dalam sistem operasi Anda saat ini.
Kasus penggunaan untuk emulasi pengguna
Instruksikan agen Anda untuk mengemulasikan lingkungan dan memverifikasi UI untuk Anda, bukan mengubah ukuran browser secara manual, melakukan spoofing IP, atau membatasi jaringan setelah setiap perubahan kode.
Integrasikan emulasi ke dalam proses pengembangan Anda dengan alur kerja ini.
Mengulangi desain responsif
Pola navigasi sering kali berubah secara drastis antara faktor bentuk seluler dan desktop. Saat membuat aplikasi, Anda dapat menginstruksikan agen untuk memverifikasi bahwa komponen yang baru saja ditulis dirender dengan benar dan memberikan konten yang sama di seluruh perangkat.
Contoh perintah:
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.
Contoh eksekusi agen: Agen Anda membuka jendela Chrome, membuka halaman, memulai emulasi, dan membandingkan item di kedua viewport. Agen tersebut mengonfirmasi bahwa tampilan seluler (Menu Burger) dan tampilan desktop (Header) berisi link yang diharapkan.
Memvalidasi interaksi lintas viewport
Tata letak rusak selama interaksi, bukan hanya di CSS. Screenshot statis sering kali melewatkan bug yang terjadi saat pengguna benar-benar menyentuh UI. Anda dapat menugaskan agen untuk menguji alur interaksi tertentu di beberapa viewport untuk menemukan bug fungsional tersembunyi.
Contoh perintah:
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.
Contoh eksekusi agen: Agen Anda mengetik kueri penelusuran dan mengubah ukuran layar menjadi masing-masing dari tiga ukuran. Dalam contoh ini, agen Anda menemukan bahwa di tablet dan perangkat seluler, kolom penelusuran diperluas untuk mengisi seluruh lebar header, sehingga mengaburkan link Sign in.
Membuat prototipe fitur yang mendukung lokasi
Menguji API yang mengandalkan lokasi fisik pengguna (seperti penelusuran "Di Sekitar Saya" atau pencari toko) biasanya mengharuskan Anda mengganti sensor secara manual. Sekarang, Anda dapat menginstruksikan agen untuk melakukan spoofing geolokasi tertentu guna memverifikasi logika frontend dan backend Anda dengan lancar.
Contoh perintah:
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.
Contoh eksekusi agen: Agen Anda membuka situs, menelusuri Berlin, lalu menyisipkan koordinat lintang dan bujur tertentu secara dinamis untuk mengemulasikan Paris, sebelum berinteraksi dengan fitur Use My Location untuk memastikan toko yang benar diisi.