Informacje o plakietkach

Sofia Emelianova

GitHub

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:

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.

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:

1. Sprawdź element na podglądzie.
2. 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:

1. Sprawdź element na podglądzie.
2. 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:

1. Sprawdź element na 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 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:

1. Sprawdź element na podglądzie.
2. 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:

1. Sprawdź element na podglądzie.
2. W drzewie DOM kliknij obok elementu plakietkę scroll-snap.
3. 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.

Uwaga: zapytania dotyczące kontenerów CSS to funkcja eksperymentalna. Aby włączyć jego obsługę w Narzędziach deweloperskich, w polu chrome://flags ustaw eksperyment Enable CSS Container Queries na Enabled. W przeciwnym razie następny podgląd nie zadziała.

Przełącz nakładkę na następującym podglądzie:

1. Sprawdź element na podglądzie.
2. W drzewie DOM kliknij obok elementu plakietkę container.
3. 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:

1. Sprawdź element na podglądzie.
2. W drzewie DOM kliknij plakietkę slot obok elementu, aby znaleźć odpowiedni boks.
   Ważne: plakietka slot jest powiązana z plakietką reveal, która pozwala Ci powrócić do postaci.
3. 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:

1. Na podglądzie kliknij Otwórz okno.
2. Sprawdź okno.
3. 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.
   Ważne: plakietka top-layer (N) jest powiązana z plakietką reveal, która pozwala Ci powrócić do postaci.
4. 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.