Referensi lencana

Sofia Emelianova
Sofia Emelianova
GitHub

Aktifkan/nonaktifkan berbagai overlay dan percepat navigasi hierarki DOM dengan referensi lengkap badge di panel Elemen ini.

Menampilkan atau menyembunyikan badge

Untuk menampilkan atau menyembunyikan badge tertentu:

  1. Buka DevTools.
  2. Klik kanan elemen di hierarki DOM dan centang satu atau beberapa badge di sub-menu Setelan badge.

Menu 'Setelan badge'.

Panel Elemen menampilkan badge yang dipilih di samping elemen yang sesuai di hierarki DOM. Bagian berikutnya menjelaskan setiap badge.

Lihat sumber

Badge view-source berada di samping tag <html> di root halaman HTML. Klik link tersebut untuk melihat sumber halaman Anda di panel Sources.

Badge 'lihat sumber'.

Badge ini memberikan alur kerja alternatif untuk opsi Lihat Sumber Halaman di menu konteks halaman Chrome (klik kanan):

  1. Di Chrome, klik kanan > Periksa halaman.
  2. Di panel Elemen, klik badge view-source di samping tag <html>.
  3. Periksa sumber halaman di panel Sources.

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.

Aktifkan/nonaktifkan overlay pada pratinjau berikut:

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

Overlay petak.

Overlay menampilkan kolom, baris, nomornya, dan celah.

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

Subgrid

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

Aktifkan/nonaktifkan overlay pada pratinjau berikut:

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

Overlay sub-petak.

Overlay menampilkan kolom, baris, nomornya, 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.

Aktifkan/nonaktifkan overlay pada pratinjau berikut:

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

Overlay fleksibel.

Overlay menampilkan posisi elemen turunan.

Untuk mempelajari cara men-debug tata letak fleksibel, lihat Memeriksa dan men-debug flexbox CSS.

DevTools dapat mendeteksi beberapa frame iklan dan menandainya. Frame tersebut memiliki badge ad di sampingnya.

Temukan iklan di pratinjau berikut:

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

Badge iklan.

Badge ad tidak dapat diklik, tetapi jika mengarahkan kursor ke badge tersebut, Anda akan melihat tooltip yang memberikan konteks tentang alasan elemen tersebut diidentifikasi sebagai iklan, seperti:

Tooltip badge iklan.

  • Asal skrip: Skrip mana yang terlibat dalam pembuatan elemen.
  • Aturan daftar filter: Aturan tertentu dari daftar filter (misalnya, EasyList) yang cocok dengan elemen atau resource yang dimuatnya.

Anda juga dapat menggunakan tab Rendering untuk menyoroti frame iklan dengan warna merah.

Scroll

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

Badge scroll di node hierarki DOM.

Scroll-snap

Penampung scroll dapat memiliki properti CSS yang mengonfigurasi titik snap. Elemen tersebut memiliki badge scroll-snap di sampingnya yang mengaktifkan overlay yang sesuai.

Aktifkan/nonaktifkan 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 overlay.

Overlay paskan scroll.

Overlay menampilkan posisi elemen dan titik penempelan.

Penampung

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

Aktifkan/nonaktifkan 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 pojok kanan bawahnya dan amati perubahan tata letak dan overlay.

Overlay penampung.

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:

  1. Periksa elemen di pratinjau.
  2. Di hierarki DOM, klik badge slot di samping elemen untuk menemukan slot yang sesuai. Slot dan badge pengungkapan.
  3. Kembali ke konten slot dengan mengklik badge reveal.

Lapisan teratas

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

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

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

Temukan badge top-layer (N) dalam pratinjau berikut:

  1. Di pratinjau, klik Buka dialog.
  2. Periksa dialog.
  3. Di hierarki DOM, klik badge top-layer (1) di samping elemen <dialog>. Panel Elemen akan mengarahkan Anda ke elemen yang sesuai di penampung #top-layer setelah tag </html> penutup. Penampung dan badge lapisan atas.
  4. Kembali ke elemen <dialog> dengan mengklik badge reveal 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.

Badge media diaktifkan di setelan badge dan ditampilkan di samping elemen video.

Untuk mengetahui informasi selengkapnya, lihat Men-debug pemutar media dengan panel Media.

Popover

Popover adalah elemen apa pun dengan atribut popover, dan berguna untuk berbagai pola interaktif, termasuk tooltip, pemberitahuan, toast, dan lainnya. Elemen tersebut memiliki badge popover di sampingnya.

Badge ini mengaktifkan badge top-layer di sampingnya yang tertaut ke elemen yang sesuai di penampung #top-layer.

Temukan badge popover di pratinjau berikut:

  1. Di pratinjau, klik TOGGLE POPOVER.
  2. Periksa popover yang muncul.

  3. Di hierarki DOM, klik badge popover di samping elemen <div popover>. Panel Elemen menampilkan badge top-layer.

    Badge popover di samping elemen dengan atribut popover.

  4. Ikuti langkah-langkah di bagian `Lapisan atas.

Untuk mempelajari lebih lanjut, lihat juga https://web.dev/learn/css/popover-and-dialog.

Gaya awal

Aturan @starting-style menentukan gaya awal pada elemen sebelum dirender di halaman. Hal ini diperlukan untuk elemen yang masuk dengan animasi dari display: none, karena elemen tersebut memerlukan status untuk masuk dengan animasi. Elemen tersebut memiliki badge starting-style di sampingnya.

Badge ini mengalihkan gaya dalam aturan @starting-style, sehingga Anda dapat melihat cara kerja animasi.

Temukan badge starting-style di pratinjau berikut:

  1. Di pratinjau, klik OPEN POPOVER.
  2. Periksa popover yang muncul.

  3. Di hierarki DOM, aktifkan/nonaktifkan badge starting-style di samping elemen <div popover>.

    Badge starting-style di samping elemen dengan aturan @starting-style.

  4. Amati animasi yang sedang berjalan dan gaya yang diterapkan di tab Elements > Styles.

Untuk mempelajari lebih lanjut, lihat juga Menganimasikan popover.

Elemen kustom

Elemen HTML kustom yang diidentifikasi dengan nama tag yang diberi tanda hubung atau atribut is="..." untuk elemen bawaan yang disesuaikan memiliki badge custom-element di sampingnya dalam hierarki DOM.

Klik badge untuk membuka kode yang relevan di panel Sumber.

Badge elemen kustom di samping elemen HTML kustom di hierarki DOM.