Sensor: Emulasi sensor perangkat

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Gunakan tab Sensors untuk mengemulasi input sensor perangkat apa pun:

Membuka tab Sensor

  1. Bergantung pada sistem operasi Anda, tekan yang berikut untuk membuka Menu Perintah:

    • Di MacOS, Command+Shift+P
    • Di Windows, Linux, atau ChromeOS, Control+Shift+P

    Menggunakan Menu Perintah untuk membuka tab Sensor.

  2. Ketik sensors, pilih Tampilkan Sensor, lalu tekan Enter. Tab Sensors akan terbuka di bagian bawah jendela DevTools.

Ganti geolokasi

Banyak situs memanfaatkan lokasi pengguna untuk memberikan pengalaman yang lebih relevan bagi pengguna mereka. Misalnya, situs cuaca mungkin menampilkan perkiraan lokal untuk area pengguna, setelah pengguna memberikan izin ke situs untuk mengakses lokasi mereka.

Jika Anda membangun UI yang berubah sesuai lokasi pengguna, Anda mungkin perlu memastikan bahwa situs berperilaku dengan benar di berbagai tempat di seluruh dunia.

Untuk mengganti geolokasi, buka tab Sensor dan, dari daftar Geolocation pilih salah satu dari berikut ini:

  • Salah satu kota preset, seperti Tokyo.
  • Lokasi kustom untuk memasukkan koordinat bujur dan lintang kustom.
  • Pilih Lokasi tidak tersedia untuk melihat perilaku situs Anda saat lokasi pengguna tidak tersedia.

Memilih 'Tokyo' dari daftar 'Geolocation'.

Menyimulasikan orientasi perangkat

Untuk menyimulasikan berbagai orientasi perangkat, buka tab Sensors, dan, dari daftar Orientation, pilih salah satu dari opsi berikut:

  • Salah satu orientasi preset, seperti Potret terbalik.
  • Orientasi kustom untuk memberikan orientasi yang tepat milik Anda sendiri.

Memilih 'Potret terbalik' dari daftar 'Orientasi'.

Setelah memilih Orientasi kustom, kolom alpha, beta, dan gamma akan diaktifkan. Lihat Alfa, Beta, dan Gamma untuk memahami cara kerja sumbu ini.

Anda juga dapat menetapkan orientasi kustom dengan menarik Model Orientasi. Tahan Shift sebelum menarik untuk memutar di sepanjang sumbu alfa.

Model Orientasi.

Paksa sentuh

Untuk menguji peristiwa sentuh di situs, Anda dapat memaksa sentuh, bukan klik, meskipun Anda menguji pada perangkat tanpa layar sentuh.

Untuk memicu peristiwa sentuh dengan pointer:

  1. Buka tab Sensors.
  2. Di menu drop-down Touch, pilih Force touch. Memaksa sentuhan, bukan klik.
  3. Klik Reload DevTools pada perintah di bagian atas.

Mengemulasi status detektor tidak ada aktivitas

Idle Detection API memungkinkan Anda mendeteksi pengguna tidak aktif dan bereaksi terhadap perubahan status tidak ada aktivitas. Dengan DevTools, Anda dapat mengemulasi perubahan status tidak ada aktivitas untuk status pengguna dan status layar, alih-alih menunggu perubahan status tidak ada aktivitas yang sebenarnya.

Untuk mengemulasi status tidak ada aktivitas:

  1. Buka tab Sensors. Untuk tutorial ini, Anda dapat mencobanya di halaman demo ini.

  2. Aktifkan kotak centang di samping Ephemeral dan, pada perintah, berikan izin deteksi tidak ada aktivitas pada halaman demo. Kemudian, muat ulang halaman.

    Memberikan izin deteksi tidak ada aktivitas pada halaman demo.

  3. Di bagian drop-down Emulate Idle detektor State, pilih salah satu opsi berikut:

    • Tidak ada emulasi tidak ada aktivitas
    • Pengguna aktif, layar tidak terkunci
    • Pengguna aktif, layar terkunci
    • Pengguna tidak ada aktivitas, layar tidak terkunci
    • Pengguna tidak ada aktivitas, layar terkunci

Memilih status tidak ada aktivitas dan terkunci di halaman demo.

Dalam contoh ini, DevTools mengemulasi status Pengguna tidak ada aktivitas, layar terkunci dan, dalam hal ini, halaman demo memulai hitung mundur 10 detik untuk menghapus kanvas.