Przełączaj różne nakładki i przyspiesz nawigację po drzewie DOM, korzystając z kompleksowego źródła plakietek w panelu Elementy.
Pokazywanie lub ukrywanie plakietek
Aby wyświetlić lub ukryć plakietki:
- Otwórz Narzędzia deweloperskie.
- Kliknij prawym przyciskiem myszy element w drzewie DOM i wybierz Ustawienia plakietki...
- Zaznacz lub odznacz pola wyboru obok wybranych plakietek.
W panelu Elementy zaznaczone są wybrane plakietki obok odpowiednich elementów w drzewie DOM. W kolejnych sekcjach opisano wszystkie plakietki.
Siatka
Element HTML jest kontenerem siatki, jeśli jego właściwość CSS display
jest ustawiona na grid
lub inline-grid
. Obok takich elementów są widoczne plakietki grid
, które umożliwiają przełączanie odpowiednich nakładek.
Przełącz nakładkę na następującym podglądzie:
- Sprawdź element na podglądzie.
- W drzewie DOM kliknij plakietkę
grid
obok elementu i obserwuj nakładkę.
Nakładka zawiera kolumny, wiersze, ich liczby oraz luki.
Więcej informacji o debugowaniu układu siatki znajdziesz w artykule Sprawdzanie siatki CSS.
Podsiatka
Siatka podrzędna to zagnieżdżona siatka, która korzysta z tych samych ścieżek co jej siatka nadrzędna. Element jest kontenerem podrzędnym, jeśli jedna lub obie jego właściwości grid-template-columns
lub grid-template-rows
są ustawione na subgrid
. Obok takich elementów są widoczne plakietki subgrid
, które umożliwiają przełączanie odpowiednich nakładek.
Przełącz nakładkę na następującym podglądzie:
- Sprawdź element na podglądzie.
- W drzewie DOM kliknij plakietkę
subgrid
obok elementu i obserwuj nakładkę.
Nakładka zawiera kolumny, wiersze, ich liczby oraz luki w siatce podrzędnej.
Flex
Element HTML jest kontenerem elastycznym, jeśli jego właściwość CSS display
jest ustawiona na flex
lub inline-flex
. Obok takich elementów są widoczne plakietki flex
, które umożliwiają przełączanie odpowiednich nakładek.
Przełącz nakładkę na następującym podglądzie:
- Sprawdź element na podglądzie.
- W drzewie DOM kliknij plakietkę
flex
obok elementu i obserwuj nakładkę.
Nakładka pokazuje pozycje elementów podrzędnych.
Więcej informacji o debugowaniu układów Flex znajdziesz w artykule Sprawdzanie i debugowanie Flexbox CSS.
Reklama
Narzędzia deweloperskie mogą wykrywać niektóre ramki reklam i oznaczać je tagami. Obok takich ramek są plakietki ad
.
Zobacz reklamę w tym podglądzie:
- Sprawdź element na podglądzie.
- W drzewie DOM znajdź element z plakietką
ad
.
Plakietki ad
nie można kliknąć, ale na karcie Renderowanie możesz podświetlić ramki reklamy na czerwono.
Przewiń i przyciągnij
Element HTML jest kontenerem do przewijania, jeśli jego właściwość CSS overflow
jest ustawiona na scroll
, lub auto
, jeśli ilość treści jest wystarczająca do wyświetlenia jej zawartości. Kontenery przewijania mogą mieć właściwości CSS, które konfiguruje punkty przyciągania. Obok takich elementów są widoczne plakietki scroll-snap
, które umożliwiają przełączanie odpowiednich nakładek.
Przełącz nakładkę na następującym podglądzie:
- Sprawdź element na podglądzie.
- W drzewie DOM kliknij obok elementu plakietkę
scroll-snap
. - Spróbuj przewinąć element w prawo i obserwuj nakładkę.
Nakładka pokazuje pozycje elementów i punkty przyciągania.
Kontener
Element HTML jest kontenerem, jeśli ma właściwość CSS container-type
. Obok takich elementów są widoczne plakietki container
, które umożliwiają przełączanie odpowiednich nakładek.
Przełącz nakładkę na następującym podglądzie:
- Sprawdź element na podglądzie.
- W drzewie DOM kliknij obok elementu plakietkę
container
. - Spróbuj zmienić rozmiar elementu, przeciągając jego prawy dolny róg, a potem zobacz, jak zmieni się układ i nakładka.
Nakładka pokazuje pozycje elementów podrzędnych.
Więcej informacji o debugowaniu zapytań dotyczących kontenerów znajdziesz w artykule o sprawdzaniu i debugowaniu zapytań o kontenery CSS.
Boks
Element HTML <slot>
to obiekt zastępczy, który możesz wypełnić własnymi treściami. W połączeniu z elementem <template>
<slot>
umożliwia tworzenie osobnych drzew DOM i prezentowanie ich razem. Obok elementów treści boksu reklamowego są widoczne plakietki slot
, które pełnią funkcję linków do odpowiednich boksów.
Odkryj plakietkę slot
w tej podglądzie:
- Sprawdź element na podglądzie.
- W drzewie DOM kliknij plakietkę
slot
obok elementu, aby znaleźć odpowiedni boks. - Kliknij plakietkę
reveal
, aby wrócić do treści boksu.
Górna warstwa
Ta plakietka pomaga zrozumieć koncepcję górnej warstwy i ją wyobrazić sobie. Górna warstwa renderuje treść nad wszystkimi innymi warstwami, niezależnie od z-index
. Gdy otworzysz element <dialog>
przy użyciu metody .showModal()
, przeglądarka umieszcza go w górnej warstwie.
Aby ułatwić wizualizację elementów górnej warstwy, panel Elementy dodaje do drzewa DOM kontener #top-layer
po zamykającym tagu </html>
.
Obok elementów górnej warstwy są widoczne plakietki top-layer (N)
, gdzie N
to numer indeksu elementu. Plakietki to linki do odpowiednich elementów w kontenerze #top-layer
.
Odkryj plakietkę top-layer (N)
w tej podglądzie:
- Na podglądzie kliknij Otwórz okno.
- Sprawdź okno.
- W drzewie DOM kliknij plakietkę
top-layer (1)
obok elementu<dialog>
. W panelu Elementy po zamykającym tagu</html>
przejdziesz do odpowiedniego elementu w kontenerze#top-layer
. - Wróć do elementu
<dialog>
, klikając plakietkęreveal
obok niego lub jego::backdrop
.
Multimedia
Plakietka media
jest domyślnie wyłączona. Włączony pojawia się obok elementów <audio>
i <video>
. Kliknij tę plakietkę, aby otworzyć panel Multimedia i debugować multimedia.
Więcej informacji znajdziesz w artykule Debugowanie odtwarzaczy multimedialnych za pomocą panelu Multimedia.