Gunakan panel Elemen untuk memeriksa dan mengedit elemen DOM.
Ringkasan
Panel Elemen menyediakan antarmuka yang andal untuk memeriksa dan memanipulasi DOM. Anda bisa menggunakan hierarki DOM yang menyerupai dokumen HTML untuk memilih simpul DOM tertentu dan mengubahnya dengan alat lain.
Panel Elemen juga memiliki tab berikut yang berisi alat yang relevan:
Gaya:
- Lihat dan debug Aturan CSS yang diterapkan pada elemen dari semua lembar gaya.
- Temukan CSS yang tidak valid, diganti, tidak aktif, atau lainnya yang tidak berfungsi sebagaimana mestinya.
- Edit elemen dengan menambahkan deklarasi, menerapkan class, dan dengan berinteraksi dengan model Box.
- 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 grid dan flexbox.
Pemroses peristiwa: Mencantumkan semua pemroses peristiwa dan atributnya. Memungkinkan Anda menemukan sumber pemroses peristiwa dan memfilter untuk pemroses pasif atau pemblokir.
Titik henti sementara DOM: Mencantumkan titik henti sementara perubahan DOM ditambahkan dari panel Elemen dan memungkinkan Anda mengaktifkan, menonaktifkan, menghapus, atau menampilkannya.
Properti: Pilih node DOM untuk memeriksa dan mengurutkan properti sendiri dan yang diwarisi dari 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 otomatis membuka panel Elemen.
Untuk membuka panel Elemen 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 Elemen di Panel Samping di bagian bawah jendela DevTools.