Referensi lencana

Sofia Emelianova

Aktifkan berbagai overlay dan percepat navigasi hierarki DOM dengan referensi badge yang komprehensif ini di panel Elemen.

Tampilkan atau sembunyikan badge

Untuk menampilkan atau menyembunyikan badge:

1. Buka DevTools.
2. Klik kanan elemen di hierarki DOM, lalu pilih Setelan badge....
3. Centang atau hapus centang kotak di samping badge yang dipilih.

Panel Elements menampilkan badge yang dipilih di samping elemen yang sesuai dalam hierarki DOM. Bagian selanjutnya akan menjelaskan setiap badge.

Petak

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:

1. Periksa elemen di pratinjau.
2. Di hierarki DOM, klik badge grid di samping elemen dan amati overlay.

Overlay menampilkan kolom, baris, nomornya, dan celah.

Untuk mempelajari cara men-debug tata letak petak, lihat Memeriksa petak CSS.

Subkisi

Sub-petak adalah petak bertingkat yang menggunakan jalur yang sama dengan petak induknya. Elemen adalah penampung sub-petak jika satu atau kedua properti grid-template-columns, grid-template-rows-nya ditetapkan ke subgrid. Elemen tersebut memiliki badge subgrid di sampingnya yang mengalihkan overlay yang sesuai.

Alihkan overlay pada pratinjau berikut:

1. Periksa elemen di pratinjau.
2. Di hierarki DOM, klik badge subgrid di samping elemen dan amati overlay.

Overlay menampilkan kolom, baris, angkanya, dan celah subpetak.

Lipat

Elemen HTML adalah penampung fleksibel jika properti CSS display-nya ditetapkan ke flex atau inline-flex. Elemen tersebut memiliki badge flex di sampingnya yang mengalihkan overlay yang sesuai.

Alihkan overlay pada pratinjau berikut:

1. Periksa elemen di pratinjau.
2. Di hierarki DOM, klik badge flex di samping elemen dan amati overlay.

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 bingkai iklan dan memberinya tag. Bingkai tersebut memiliki badge ad di sampingnya.

Temukan iklan dalam pratinjau berikut:

1. Periksa elemen di pratinjau.
2. Di hierarki DOM, temukan elemen dengan badge ad di sampingnya.

Badge ad tidak dapat diklik, tetapi Anda dapat menggunakan tab Rendering untuk menandai bingkai iklan dengan warna merah.

Scroll

Elemen HTML adalah penampung scroll jika properti CSS overflow-nya disetel ke scroll, atau auto jika ada cukup konten untuk menyebabkan overflow. Elemen tersebut memiliki badge scroll di sampingnya.

Snap scroll

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:

1. Periksa elemen di pratinjau.
2. Di hierarki DOM, klik badge scroll-snap di samping elemen.
3. Coba scroll elemen ke kanan dan amati overlaynya.

Overlay menampilkan posisi elemen dan titik penunjuk.

Penampung

Elemen HTML adalah penampung jika memiliki properti CSS container-type. Elemen tersebut memiliki badge container di sampingnya yang mengalihkan overlay yang sesuai.

Catatan: Kueri penampung CSS adalah fitur eksperimental. Untuk mengaktifkan dukungannya di DevTools, di bagian chrome://flags, tetapkan eksperimen Enable CSS Container Queries ke Enabled. Jika tidak, pratinjau berikutnya tidak akan berfungsi.

Alihkan overlay pada pratinjau berikut:

1. Periksa elemen di pratinjau.
2. Di hierarki DOM, klik badge container di samping elemen.
3. Coba ubah ukuran elemen dengan menarik sudut kanan bawahnya dan amati perubahan tata letak dan 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 ink_selectionslot di sampingnya yang berfungsi sebagai link ke slot yang sesuai.

Temukan badge ink_selectionslot dalam pratinjau berikut:

1. Periksa elemen di pratinjau.
2. Di hierarki DOM, klik badge ink_selectionslot di samping elemen untuk menemukan slot yang sesuai.
   Poin penting: Badge ink_selectionslot memiliki badge ink_selectionreveal yang tersambung dan akan membawa Anda kembali.
3. Kembali ke konten slot dengan mengklik badge ink_selectionreveal.

Lapisan atas

Badge ini membantu Anda memahami konsep lapisan atas dan memvisualisasikannya. Lapisan atas merender konten di atas semua lapisan lainnya, terlepas dari z-index. Saat Anda membuka elemen <dialog> menggunakan metode .showModal(), browser akan menempatkannya di lapisan teratas.

Untuk membantu Anda memvisualisasikan elemen lapisan atas, panel Elements menambahkan penampung #top-layer ke hierarki DOM setelah tag </html> penutup.

Elemen lapisan atas memiliki badge ink_selectiontop-layer (N) di sampingnya, dengan N sebagai nomor indeks elemen. Badge adalah link ke elemen yang sesuai di penampung #top-layer.

Temukan badge ink_selectiontop-layer (N) di pratinjau berikut:

1. Di pratinjau, klik Buka dialog.
2. Periksa dialog.
3. Di hierarki DOM, klik badge ink_selectiontop-layer (1) di samping elemen <dialog>. Panel Elemen akan mengarahkan Anda ke elemen yang sesuai di penampung #top-layer setelah tag </html> penutup.
   Poin penting: Badge ink_selectiontop-layer (N) memiliki badge ink_selectionreveal yang tersambung dan akan membawa Anda kembali.
4. Kembali ke elemen <dialog> dengan mengklik badge ink_selectionreveal di samping elemen atau ::backdrop-nya.

Media

Badge media dinonaktifkan secara default. Jika diaktifkan, elemen 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.