Gunakan panel Elemen untuk memeriksa dan mengedit elemen DOM.
Ringkasan
Panel Elements menyediakan antarmuka yang andal untuk memeriksa dan memanipulasi DOM. Anda bisa menggunakan hierarki DOM, yang menyerupai dokumen HTML, untuk memilih simpul DOM tertentu dan memodifikasinya dengan alat lain.
Panel Elemen juga memiliki tab berikut yang berisi alat yang relevan:
Gaya:
- Melihat dan men-debug aturan CSS yang diterapkan ke sebuah elemen dari semua lembar gaya.
- Temukan CSS yang tidak valid, diganti, tidak aktif, atau CSS lain yang tidak berfungsi sebagaimana mestinya.
- Edit elemen dengan menambahkan deklarasi, menerapkan class, dan berinteraksi dengan Model box.
- Mengakses opsi pengeditan penampung dengan Badge yang ditemukan di hierarki DOM.
Dihitung: Daftar properti yang di-resolve diterapkan ke elemen saat dirender oleh Chrome.
Tata letak: Berisi opsi untuk mengubah overlay grid dan flexbox.
Pemroses peristiwa: Mencantumkan semua pemroses peristiwa dan atributnya. Memungkinkan Anda menemukan sumber pemroses peristiwa dan memfilter pemroses pasif atau pemblokir.
Titik henti sementara DOM: Mencantumkan titik henti sementara perubahan DOM yang ditambahkan dari panel Elemen dan memungkinkan Anda mengaktifkan, menonaktifkan, menghapus, atau memunculkannya.
Properti: Pilih node DOM untuk memeriksa dan mengurutkan properti sendiri dan yang diwarisi objek.
Aksesibilitas: Mencantumkan elemen yang memiliki label ARIA dan propertinya. Memungkinkan Anda beralih dan memeriksa hierarki aksesibilitas (eksperimental).
Membuka panel Elemen
Secara default, saat Anda membuka DevTools, panel Elemen akan terbuka. Anda juga dapat memeriksa node di mana saja pada halaman untuk membuka panel Elemen secara otomatis.
Untuk membuka panel Elements secara manual:
- Buka DevTools.
- Buka menu Command dengan menekan:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Mulai ketik
Elements, pilih Tampilkan Elemen, lalu tekan Enter. DevTools menampilkan panel Elements di Drawer di bagian bawah jendela DevTools.