Alihkan berbagai overlay dan percepat navigasi hierarki DOM dengan referensi badge yang komprehensif di panel Elemen.
Tampilkan atau sembunyikan badge
Untuk menampilkan atau menyembunyikan badge:
- Buka DevTools.
- Klik kanan elemen dalam hierarki DOM, lalu pilih Setelan badge....
- Centang atau hapus centang pada kotak di samping badge yang dipilih.
Panel Elemen menampilkan badge yang dipilih di samping elemen yang sesuai di hierarki DOM. Bagian berikutnya akan menjelaskan setiap lencana.
Kisi
Elemen HTML adalah penampung petak jika properti CSS display
-nya ditetapkan ke grid
atau inline-grid
. Elemen tersebut memiliki badge grid
di sampingnya yang mengalihkan overlay yang sesuai.
Alihkan overlay pada pratinjau berikut:
- Periksa elemen di pratinjau.
- Di hierarki DOM, klik badge
grid
di samping elemen dan amati overlay-nya.
Overlay menampilkan kolom, baris, jumlah, dan celah.
Untuk mempelajari cara men-debug tata letak petak, lihat Memeriksa petak CSS.
Sub-petak
Subgrid adalah petak bertingkat yang menggunakan jalur yang sama dengan petak induknya. Elemen adalah penampung subgrid jika salah satu atau kedua properti grid-template-columns
dan grid-template-rows
-nya ditetapkan ke subgrid
. Elemen tersebut memiliki badge subgrid
di sampingnya yang mengalihkan overlay yang sesuai.
Alihkan overlay pada pratinjau berikut:
- Periksa elemen di pratinjau.
- Di hierarki DOM, klik badge
subgrid
di samping elemen dan amati overlay-nya.
Overlay menunjukkan kolom, baris, jumlah, dan celah subgrid.
Flex
Elemen HTML adalah penampung fleksibel jika properti CSS display
ditetapkan ke flex
atau inline-flex
. Elemen tersebut memiliki badge flex
di sampingnya yang mengalihkan overlay yang sesuai.
Alihkan overlay pada pratinjau berikut:
- Periksa elemen di pratinjau.
- Di hierarki DOM, klik badge
flex
di samping elemen dan amati overlay-nya.
Overlay menampilkan posisi elemen turunan.
Untuk mempelajari cara men-debug tata letak fleksibel, lihat Memeriksa dan men-debug flexbox CSS.
Iklan
DevTools dapat mendeteksi beberapa frame iklan dan memberinya tag. Frame tersebut memiliki badge ad
di sampingnya.
Temukan iklan di pratinjau berikut:
- Periksa elemen di pratinjau.
- Di hierarki DOM, temukan elemen dengan badge
ad
di sampingnya.
Badge ad
tidak dapat diklik, tetapi Anda dapat menggunakan tab Rendering untuk menyoroti bingkai iklan dengan warna merah.
Scroll
Elemen HTML adalah penampung scroll jika properti CSS overflow
-nya ditetapkan ke scroll
, atau auto
saat terdapat cukup konten untuk menyebabkan overflow. Penampung scroll dapat memiliki properti CSS yang mengonfigurasi titik snap. Elemen tersebut memiliki badge scroll-snap
di sampingnya yang mengalihkan overlay yang sesuai.
Alihkan overlay pada pratinjau berikut:
- Periksa elemen di pratinjau.
- Di hierarki DOM, klik badge
scroll-snap
di samping elemen. - Coba scroll elemen ke kanan dan amati overlay-nya.
Overlay menampilkan posisi elemen dan titik snap.
Container
Elemen HTML adalah penampung jika memiliki properti CSS container-type
. Elemen tersebut memiliki badge container
di sampingnya yang mengalihkan overlay yang sesuai.
Alihkan overlay pada pratinjau berikut:
- Periksa elemen di pratinjau.
- Di hierarki DOM, klik badge
container
di samping elemen. - Coba ubah ukuran elemen dengan menarik sudut kanan bawah dan amati perubahan tata letak serta overlay.
Overlay menampilkan posisi elemen turunan.
Untuk mempelajari cara men-debug kueri penampung, lihat Memeriksa dan men-debug kueri penampung CSS.
Slot
Elemen HTML <slot>
adalah placeholder yang dapat Anda isi dengan konten Anda sendiri. Bersama dengan elemen <template>
, <slot>
memungkinkan Anda membuat hierarki DOM terpisah dan menampilkannya bersama-sama. Elemen konten slot memiliki badge slot
di sampingnya yang berfungsi sebagai link ke slot yang sesuai.
Temukan badge slot
dalam pratinjau berikut:
- Periksa elemen di pratinjau.
- Di hierarki DOM, klik badge
slot
di samping elemen untuk menemukan slot yang sesuai. - Kembali ke konten slot dengan mengklik badge
reveal
.
Lapisan atas
Badge ini membantu Anda memahami konsep lapisan atas dan memvisualisasikannya. Lapisan atas merender konten di atas semua lapisan lain, terlepas dari z-index
. Saat Anda membuka elemen <dialog>
menggunakan metode .showModal()
, browser akan menempatkannya di lapisan atas.
Untuk membantu Anda memvisualisasikan elemen lapisan atas, panel Elemen menambahkan penampung #top-layer
ke hierarki DOM setelah tag </html>
penutup.
Elemen lapisan atas memiliki badge top-layer (N)
di sampingnya, dengan N
sebagai nomor indeks elemen. Badge adalah link ke elemen yang sesuai dalam penampung #top-layer
.
Temukan badge top-layer (N)
dalam pratinjau berikut:
- Dalam pratinjau, klik Buka dialog.
- Periksa dialog.
- Di hierarki DOM, klik badge
top-layer (1)
di samping elemen<dialog>
. Panel Elemen mengarahkan Anda ke elemen yang sesuai di penampung#top-layer
setelah tag</html>
penutup. - Kembali ke elemen
<dialog>
dengan mengklik badgereveal
di samping elemen atau::backdrop
-nya.
Media
Badge media
dinonaktifkan secara default. Jika diaktifkan, setelan ini akan muncul di samping elemen <audio>
dan <video>
. Klik badge ini untuk membuka panel Media dan men-debug media Anda.
Untuk mengetahui informasi selengkapnya, lihat Men-debug pemutar media dengan panel Media.