Gunakan panel Elemen untuk memeriksa dan mengedit elemen DOM.
Ringkasan
Panel Elements menyediakan antarmuka yang andal untuk memeriksa dan memanipulasi DOM. Anda dapat menggunakan hierarki DOM, yang menyerupai dokumen HTML, untuk memilih node DOM tertentu dan mengubahnya dengan alat lain.
Panel Elements juga memiliki tab berikut yang berisi alat yang relevan:
Gaya:
- Melihat dan men-debug aturan CSS yang diterapkan ke elemen dari semua lembar gaya.
- Temukan CSS yang tidak valid, diganti, tidak aktif, atau CSS lainnya yang tidak berfungsi sebagaimana mestinya.
- Edit elemen dengan menambahkan deklarasi, menerapkan class, dan berinteraksi dengan Model kotak.
- Akses opsi pengeditan penampung dengan Badge yang ada di hierarki DOM.
Dihitung: Mencantumkan properti yang diselesaikan yang diterapkan ke elemen saat dirender oleh Chrome.
Tata Letak: Berisi opsi untuk mengubah overlay petak dan flexbox.
Pemroses peristiwa: Mencantumkan semua pemroses peristiwa dan atributnya. Memungkinkan Anda menemukan sumber pemroses peristiwa dan memfilter pemroses pasif atau pemblokiran.
Titik henti sementara DOM: Mencantumkan titik henti sementara perubahan DOM yang ditambahkan dari panel Elemen dan memungkinkan Anda mengaktifkan, menonaktifkan, menghapus, atau menampilkannya.
Properties: Pilih node DOM untuk memeriksa dan mengurutkan properti milik sendiri dan properti yang diwariskan objek.
Aksesibilitas: Mencantumkan elemen yang memiliki label ARIA dan propertinya. Memungkinkan Anda mengaktifkan/menonaktifkan dan memeriksa hierarki aksesibilitas (eksperimental).
Buka panel Elemen
Secara default, saat Anda membuka DevTools, panel Elements akan terbuka. Anda juga dapat memeriksa node di mana saja di halaman untuk membuka panel Elements secara otomatis.
Untuk membuka panel Elements secara manual:
- Buka DevTools.
- Buka Menu perintah 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.