Gunakan panel Elemen untuk memeriksa dan mengedit elemen DOM.
Ringkasan
Panel Elemen 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 Elemen juga memiliki tab berikut yang berisi alat yang relevan:
Gaya:
- Lihat dan debug aturan CSS yang diterapkan ke elemen dari semua sheet 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 Kotak.
- Akses opsi pengeditan penampung dengan Badge yang ditemukan di hierarki DOM.
Dihitung: Mencantumkan properti yang di-resolve 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 pemblokir.
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 sendiri dan properti yang diwarisi objek.
Aksesibilitas: Mencantumkan elemen yang memiliki label ARIA dan propertinya. Memungkinkan Anda mengalihkan 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 di halaman untuk otomatis membuka panel Elemen.
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 Show Elements, lalu tekan Enter. DevTools menampilkan panel Elemen di Panel samping di bagian bawah jendela DevTools.