Sensor: Emulasi sensor perangkat

Sofia Emelianova
Sofia Emelianova

Gunakan panel Sensor untuk mengemulasi input sensor perangkat apa pun.

Ringkasan

Panel Sensor memungkinkan Anda melakukan hal berikut:

Membuka panel Sensor

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

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

    Menggunakan Menu Perintah untuk membuka panel Sensor.

  2. Ketik sensors, pilih Show Sensors, lalu tekan Enter. Panel Sensors akan terbuka di bagian bawah jendela DevTools.

Mengganti geolokasi

Banyak situs memanfaatkan lokasi pengguna untuk memberikan pengalaman yang lebih relevan bagi penggunanya. Misalnya, situs cuaca dapat menampilkan perkiraan cuaca lokal untuk area pengguna, setelah pengguna memberikan izin kepada situs untuk mengakses lokasinya.

Jika Anda membuat UI yang berubah bergantung pada lokasi pengguna, sebaiknya pastikan situs berperilaku dengan benar di berbagai tempat di seluruh dunia.

Untuk mengganti geolokasi Anda, buka panel Sensor, lalu dari daftar Geolokasi, pilih salah satu dari opsi berikut:

  • 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 panel Sensor, dan, dari daftar Orientasi, pilih salah satu dari opsi berikut:

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

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 sepanjang sumbu alpha.

Model Orientasi.

Sentuhan paksa

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

Untuk memicu peristiwa sentuh dengan kursor Anda:

  1. Buka panel Sensors.
  2. Di menu drop-down Sentuh, pilih Sentuh lama. Memaksa sentuh, bukan klik.
  3. Klik Muat ulang DevTools di perintah di bagian atas.

Meniru status pendeteksi tidak ada aktivitas

Idle Detection API memungkinkan Anda mendeteksi pengguna yang 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, bukan menunggu status tidak ada aktivitas yang sebenarnya berubah.

Untuk mengemulasi status tidak ada aktivitas:

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

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

    Memberikan izin deteksi tidak ada aktivitas di halaman demo.

  3. Di menu drop-down Emulate Idle detector State, pilih salah satu dari opsi berikut:

    • Tidak ada emulasi tanpa 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.

Mengemulasikan konkurensi hardware

Untuk mengemulasi performa situs di perangkat dengan jumlah core prosesor yang berbeda, Anda dapat mengganti nilai yang dilaporkan oleh properti navigator.hardwareConcurrency. Beberapa aplikasi menggunakan properti ini untuk mengontrol tingkat paralelisme aplikasinya, misalnya, untuk mengontrol ukuran kumpulan Emscripten pthread.

Untuk mengemulasi konkurensi hardware:

  1. Buka panel Sensors.
  2. Di dekat bagian bawah panel, temukan dan aktifkan Hardware concurrency.
  3. Di kotak input angka, masukkan jumlah core yang ingin diemulasi.

Mengaktifkan 'Konkurensi hardware' dengan jumlah core yang ditetapkan ke 10.

Untuk kembali ke nilai default, klik tombol Reset.