Melacak fokus elemen

Kayce Basque
Kayce Basques

Misalkan Anda menguji aksesibilitas navigasi keyboard sebuah halaman. Saat membuka halaman dengan tombol Tab, lingkaran fokus terkadang menghilang karena elemen yang memiliki fokus tersembunyi. Untuk melacak elemen yang difokuskan di DevTools:

  1. Buka Konsol.
  2. Klik Buat Ekspresi Langsung Buat Ekspresi Langsung.

    Membuat Ekspresi Langsung.

    Untuk informasi selengkapnya, lihat Menonton nilai JavaScript secara real-time dengan Ekspresi Langsung.

  3. Ketik document.activeElement.

  4. Klik di luar UI Live Expression untuk menyimpan.

Nilai yang Anda lihat di bawah document.activeElement adalah hasil dari ekspresi. Karena ekspresi tersebut selalu mewakili elemen yang difokuskan, Anda kini memiliki cara untuk selalu melacak elemen mana yang memiliki fokus.

  • Arahkan kursor ke hasil untuk menandai elemen yang difokuskan di area pandang.
  • Klik kanan hasil, lalu pilih Reveal in Elements panel untuk menampilkan elemen di DOM Tree pada panel Elements.
  • Klik kanan hasil, lalu pilih Store as global variable untuk membuat referensi variabel ke node yang dapat Anda gunakan di Konsol.