Chrome DevTools untuk agen memungkinkan agen Anda memverifikasi tata letak responsif, menguji API yang mengetahui lokasi, dan menyimulasikan berbagai kecepatan CPU atau jaringan. Gunakan alat ini untuk mengidentifikasi kasus ekstrem dan mengotomatiskan audit performa secara 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-hal yang dapat Anda tiru meliputi:
- Area tampilan dan agen pengguna: Meniru ukuran layar dan ID perangkat tertentu.
- Geolocation: Menipu koordinat lokasi untuk menguji API yang mengetahui lokasi.
- Jaringan dan CPU: Batasi kondisi jaringan dan kecepatan CPU untuk menyimulasikan batasan performa di dunia nyata.
- Skema warna: Beralih antara mode terang dan gelap.
Saat menggunakan emulasi, perhatikan hal berikut:
- Dukungan perangkat: Agen Anda dapat mengemulasi perangkat apa pun dalam daftar
KnownDevicesPuppeteer. Ini termasuk menyimulasikan peristiwa sentuhan untuk area tampilan seluler. - Perilaku mesin browser: Meskipun alat ini meniru karakteristik perangkat, alat ini tidak mensimulasikan mesin browser non-Chromium atau sistem operasi yang berbeda. Agen Anda selalu dieksekusi di Chrome pada sistem operasi Anda saat ini.
Kasus penggunaan untuk peniruan pengguna
Perintahkan agen Anda untuk meniru lingkungan dan memverifikasi UI untuk Anda, daripada mengubah ukuran browser secara manual, memalsukan IP, atau membatasi jaringan setelah setiap perubahan kode.
Integrasikan emulasi ke dalam proses pengembangan Anda dengan alur kerja ini.
Melakukan iterasi pada desain responsif
Pola navigasi sering kali berubah secara drastis antara faktor bentuk seluler dan desktop. Saat membangun 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 peniruan, dan membandingkan item di kedua area tampilan. Hal ini mengonfirmasi bahwa tampilan seluler (Menu Tiga Garis) dan tampilan desktop (Header) berisi link yang diharapkan.
Memvalidasi interaksi lintas area tampilan
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 Anda untuk menguji alur interaksi tertentu di beberapa area tampilan 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 tiga ukuran. Dalam contoh ini, agen Anda menangkap bahwa di tablet dan perangkat seluler, kotak penelusuran meluas untuk mengisi seluruh lebar header, sehingga menutupi link Login.
Membuat prototipe fitur yang mampu menentukan lokasi
Menguji API yang mengandalkan lokasi fisik pengguna (seperti penelusuran "Di Dekat Saya" atau pencari lokasi toko) biasanya mengharuskan Anda mengganti sensor secara manual. Sekarang, Anda dapat menginstruksikan agen untuk memalsukan 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 meniru Paris, sebelum berinteraksi dengan fitur Gunakan Lokasi Saya untuk memastikan toko yang benar ditampilkan.