Informacje o plakietkach

Dzięki wszechstronnemu informacjom na temat plakietek w panelu Elementy możesz przełączać różne nakładki i przyspieszyć nawigację po drzewie DOM.

Pokazywanie i ukrywanie plakietek

Aby wyświetlić lub ukryć plakietki:

1. Otwórz Narzędzia deweloperskie.
2. Kliknij prawym przyciskiem myszy element w drzewie DOM i wybierz Ustawienia plakietki....
3. Zaznacz lub odznacz pola wyboru obok wybranych plakietek.

Panel Elementy wyświetla wybrane plakietki obok odpowiednich elementów w drzewie DOM. W kolejnych sekcjach opisujemy poszczególne 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 znajdują się plakietki (grid), które przełączają odpowiednie nakładki.

Włącz lub wyłącz nakładkę w tym podglądzie:

1. Sprawdź element na podglądzie.
2. W drzewie DOM kliknij obok elementu plakietkę grid i zobacz nakładkę.

Nakładka pokazuje kolumny, wiersze, ich liczbę i przerwy.

Aby dowiedzieć się, jak debugować układ siatki, przeczytaj artykuł Sprawdzanie siatki CSS.

Podsiatka

Podkrat to zagnieżdżona siatka, która używa tych samych ścieżek co siatka nadrzędna. Element jest kontenerem podgridu, jeśli co najmniej jedna z właściwości grid-template-columns lub grid-template-rows jest ustawiona na subgrid. Obok takich elementów znajdują się plakietki (subgrid), które przełączają odpowiednie nakładki.

Przełącz nakładkę w tym podglądzie:

1. Sprawdź element na podglądzie.
2. W drzewie DOM kliknij obok elementu plakietkę subgrid i zobacz nakładkę.

W nakładce wyświetlają się kolumny, wiersze, ich liczby i luki w siatce podrzędnej.

Flex

Element HTML jest kontenerem flex, jeśli jego właściwość CSS display ma wartość flex lub inline-flex. Obok takich elementów znajdują się plakietki (flex), które przełączają odpowiednie nakładki.

Przełącz nakładkę w tym podglądzie:

1. Sprawdź element na podglądzie.
2. W drzewie DOM kliknij obok elementu plakietkę flex i zobacz nakładkę.

Nakładka wyświetla pozycje elementów podrzędnych.

Więcej informacji o debugowaniu układów elastycznych znajdziesz w artykule Sprawdzanie i debugowanie CSS Flexbox.

Reklama

Narzędzie DevTools może wykrywać niektóre ramki reklam i je oznaczać. Takie ramki mają obok plakietkę ad.

Poznaj reklamę na podstawie tego podglądu:

1. Sprawdź element na podglądzie.
2. W drzewie DOM znajdź element z plakietką ad obok niego.

Plakietki ad nie można kliknąć, ale na karcie Wyświetlanie możesz podświetlać ramki reklam na czerwono.

Przewiń i chwyć

Element HTML jest kontenerem przewijania, jeśli jego właściwość CSS overflow ma wartość scroll lub auto, gdy jest wystarczająco dużo treści, by spowodować jej przepełnienie. Kontenery przewijania mogą mieć właściwości CSS, które konfigurują punkty wiązania. Obok takich elementów znajdują się plakietki (scroll-snap), które przełączają odpowiednie nakładki.

Włącz lub wyłącz nakładkę w tym podglądzie:

1. Sprawdź element na podglądzie.
2. W drzewie DOM kliknij plakietkę scroll-snap obok elementu.
3. Przewiń element w prawo i obserwuj nakładkę.

Nakładka pokazuje położenie elementów i punkty przyciągania.

Kontener

Element HTML jest kontenerem, jeśli ma właściwość CSS container-type. Obok takich elementów znajdują się plakietki (container), które przełączają odpowiednie nakładki.

Przełącz nakładkę w tym podglądzie:

1. Sprawdź element na podglądzie.
2. W drzewie DOM kliknij plakietkę container obok elementu.
3. Spróbuj zmienić rozmiar elementu, przeciągając jego prawy dolny róg i obserwując zmiany układu i nakładki.

Nakładka wyświetla pozycje elementów podrzędnych.

Więcej informacji o debugowaniu zapytań dotyczących kontenerów znajdziesz w artykule Sprawdzanie i debugowanie zapytań dotyczących kontenerów CSS.

Boks

Element HTML <slot> to obiekt zastępczy, który możesz wypełnić własną treścią. W połączeniu z elementem <template> <slot> umożliwia tworzenie osobnych drzew DOM i ich przedstawianie razem. Obok elementów treści boksu reklamowego znajdują się plakietki ink_selectionslot, które służą jako linki do odpowiednich boksów.

Zobacz plakietkę ink_selectionslot w tym podglądzie:

1. Sprawdź element w podglądzie.
2. W drzewie DOM kliknij plakietkę ink_selectionslot obok elementu, aby znaleźć odpowiedni slot.
3. Aby wrócić do zawartości boksu, kliknij plakietkę ink_selectionreveal.

Górna warstwa

Ta plakietka pomaga zrozumieć i zwizualizować koncepcję najwyższego poziomu. Górna warstwa renderuje treści na wierzchu wszystkich innych warstw, niezależnie od z-index. Gdy otworzysz element <dialog> za pomocą metody .showModal(), przeglądarka umieści go w górnej warstwie.

Aby ułatwić wizualizację elementów górnej warstwy, panel Elementy dodaje kontener #top-layer do drzewa DOM po zamykającym tagu </html>.

Obok elementów górnej warstwy znajdują się plakietki ink_selectiontop-layer (N), gdzie N to numer indeksu elementu. Plakietki to linki do odpowiednich elementów w kontenerze #top-layer.

Zobacz plakietkę ink_selectiontop-layer (N) w tym podglądzie:

1. W podglądzie kliknij Otwórz okno.
2. Sprawdź okno.
3. W drzewie DOM kliknij plakietkę ink_selectiontop-layer (1) obok elementu <dialog>. Panel Elementy przeniesie Cię do odpowiedniego elementu w kontenerze #top-layer po zamykającym tagu </html>.
4. Wróć do elementu <dialog>, klikając plakietkę ink_selectionreveal obok elementu lub jego ::backdrop.

Multimedia

Plakietka media jest domyślnie wyłączona. Gdy ta opcja jest włączona, jest widoczna obok elementów <audio> i <video>. Kliknij tę plakietkę, aby otworzyć panel Multimedia i debugować multimedia.

Więcej informacji znajdziesz w artykule Debugowanie odtwarzaczy za pomocą panelu multimediów.