Informacje o plakietkach

Sofia Emelianova

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 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.

Panel Elementy wyświetla wybrane plakietki obok odpowiednich elementów w drzewie DOM. W kolejnych sekcjach opisujemy poszczególne plakietki.

GRid

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.

Przełą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ę.

W nakładce widoczne są kolumny, wiersze, ich liczby i luki.

Więcej informacji o debugowaniu układu siatki znajdziesz w sekcji Sprawdzanie siatki CSS.

Podsiatka

Podsiatka to zagnieżdżona siatka, która korzysta z tych samych ścieżek co siatka nadrzędna. Element jest kontenerem siatki podrzędnej, jeśli co najmniej jedna z jego właściwości grid-template-columns i grid-template-rows ma wartość 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 jest ustawiona na 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ędzia deweloperskie mogą wykrywać niektóre ramki reklam i oznaczać je tagami. Obok takich ramek znajduje się ad plakietka.

Odkryj reklamę na tym podglądzie:

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

Plakietki ad nie można kliknąć, ale możesz skorzystać z karty Renderowanie, aby wyróżnić 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 konfiguruje punkty przyciągania. 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. Spróbuj przewinąć element w prawo i zobaczyć 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.

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

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 prezentowanie ich razem. Obok elementów z treścią boksu reklamowego znajduje się slot plakietek, które służą jako linki do odpowiednich boksów.

Zobacz plakietkę slot na tym podglądzie:

1. Sprawdź element na podglądzie.
2. W drzewie DOM kliknij obok elementu plakietkę slot, aby znaleźć odpowiedni boks.
   Ważne: z plakietką slot masz sparowaną plakietkę reveal, z którą możesz wrócić.
3. Aby wrócić do zawartości boksu, kliknij plakietkę reveal.

Górna warstwa

Ta plakietka pomaga zrozumieć pojęcie górnej warstwy i ją zwizualizuje. Górna warstwa renderuje treści nałożone na wszystkie pozostałe warstwy, niezależnie od tego, czy z-index jest w nim wyświetlany. Gdy otworzysz element <dialog> za pomocą metody .showModal(), przeglądarka umieszcza 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 znajduje się top-layer (N) plakietek, gdzie N to numer indeksu elementu. Plakietki to linki do odpowiednich elementów w kontenerze #top-layer.

Zobacz plakietkę top-layer (N) na tym podglądzie:

1. W podglądzie kliknij Otwórz okno.
2. Sprawdź okno.
3. W drzewie DOM kliknij plakietkę top-layer (1) obok elementu <dialog>. Panel Elementy przeniesie Cię do odpowiedniego elementu w kontenerze #top-layer po zamykającym tagu </html>.
   Ważne: z plakietką top-layer (N) masz sparowaną plakietkę reveal, z którą możesz wrócić.
4. Wróć do elementu <dialog>, klikając plakietkę reveal obok niego 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.