Informacje o plakietkach

Przełączaj różne nakładki i przyspiesz nawigację po drzewie DOM dzięki obszernemu zestawowi plakietek w panelu Elementy.

Pokazywanie i ukrywanie plakietek

Aby wyświetlać lub ukrywać 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 plakiet.

W panelu Elementy wybrane plakietki są widoczne 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 ma wartość grid lub inline-grid. Takie elementy mają obok plakietki grid, które przełączają odpowiednie nakładki.

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

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

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

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

Subgrid

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 w podglądzie.
2. W drzewie modelu DOM kliknij plakietkę subgrid obok elementu i obserwuj nakładkę.

Nakładka pokazuje kolumny, wiersze, ich numery i przerwy w subsiatków.

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 umożliwiają przełączanie odpowiednich nakładek.

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

1. Sprawdź element w podglądzie.
2. 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 elastycznych znajdziesz w artykule Sprawdzanie i debugowanie arkusza Flexbox CSS.

Reklama

Narzędzie DevTools może wykrywać niektóre ramki reklam i je oznaczać. Obok takich ramek znajduje się ad plakietka.

Poznaj reklamę na podstawie tego podglądu:

1. Sprawdź element w podglądzie.
2. W drzewie DOM znajdź element z oznaczeniem ad.

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

Przewiń

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, aby spowodować przepełnienie. Takie elementy mają obok plakietki scroll.

Przyciąganie podczas przewijania

Kontenery przewijania mogą mieć właściwości CSS, które konfigurują punkty dopasowania. Obok takich elementów znajdują się plakietki (scroll-snap), 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ę scroll-snap obok elementu.
3. Przewiń element w prawo i obserwuj nakładkę.

Nakładka pokazuje pozycje elementów i punkty dopasowania.

Kontener

Element HTML jest kontenerem, jeśli ma właściwość CSS container-type. Obok takich elementów znajdują się plakietki container, które umożliwiają przełączanie odpowiednich nakładek.

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

1. Sprawdź element w 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 zmiany układu i nakładki.

Nakładka pokazuje pozycje elementów podrzędnych.

Aby dowiedzieć się, jak debugować zapytania do kontenera, zapoznaj się z artykułem Sprawdzanie i debugowanie zapytań do kontenera CSS.

Boks

Element HTML <slot> to miejsce zastępcze, które możesz wypełnić własnymi treściami. Wraz z elementem <template> element <slot> umożliwia tworzenie oddzielnych drzew DOM i ich wspólne prezentowanie. Elementy treści slotu mają obok siebie plakietki ink_selectionslot, które służą jako linki do odpowiednich slotó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 treści slotu, 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 najwyższej warstwy, panel Elementy dodaje do drzewa DOM kontener #top-layer po tagu zamykającym </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 dialogowe.
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. Aby wrócić do elementu <dialog>, kliknij plakietkę ink_selectionreveal obok tego 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 multimediów za pomocą panelu multimediów.