Informacje o plakietkach

Przełączaj różne nakładki i przyspieszaj nawigację po drzewie DOM dzięki temu kompleksowemu przewodnikowi po plakietkach w panelu Elementy.

Wyświetlanie i ukrywanie plakietek

Aby wyświetlić lub ukryć określone plakietki:

1. Otwórz Narzędzia deweloperskie.
2. Kliknij element w drzewie DOM prawym przyciskiem myszy i zaznacz jedną lub kilka plakietek w menu podrzędnym Ustawienia plakietek.

W panelu Elementy wybrane plakietki są wyświetlane obok odpowiednich elementów w drzewie DOM. W kolejnych sekcjach znajdziesz opis każdej plakietki.

Wyświetl źródło

Plakietka view-source znajduje się obok tagu <html> u góry strony HTML. Kliknij ją, aby wyświetlić źródło strony w panelu Źródła.

Ta plakietka zapewnia alternatywny sposób pracy w porównaniu z opcją Wyświetl źródło strony w menu kontekstowym strony Chrome (kliknięcie prawym przyciskiem myszy):

1. W Chrome kliknij stronę prawym przyciskiem myszy i wybierz Zbadaj.
2. W panelu Elementy kliknij plakietkę view-source obok tagu <html>.
3. Sprawdź źródło strony w panelu Źródła.

Siatka

Element HTML jest kontenerem siatki, jeśli jego właściwość CSS display jest ustawiona na grid lub inline-grid. Takie elementy mają obok siebie 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 DOM kliknij plakietkę grid obok elementu i obserwuj nakładkę.

Nakładka pokazuje kolumny, wiersze, ich numery i odstępy.

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

Podsiatka

Podsiatka to zagnieżdżona siatka, która używa tych samych ścieżek co siatka nadrzędna. Element jest kontenerem podsiatki, jeśli co najmniej jedna z jego właściwości grid-template-columns lub grid-template-rows jest ustawiona na subgrid. Takie elementy mają obok siebie 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 DOM kliknij plakietkę subgrid obok elementu i obserwuj nakładkę.

Nakładka pokazuje kolumny, wiersze, ich numery i odstępy podsiatki.

Flex

Element HTML jest kontenerem elastycznym, jeśli jego właściwość CSS display jest ustawiona na flex lub inline-flex. Takie elementy mają obok siebie plakietki flex, które przełączają odpowiednie nakładki.

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.

Aby dowiedzieć się, jak debugować układy flex, przeczytaj artykuł Sprawdzanie i debugowanie flexbox CSS.

Reklama

Narzędzia deweloperskie mogą wykrywać niektóre ramki reklam i oznaczać je tagami. Takie ramki mają obok siebie plakietki ad.

Odkryj reklamę w tym podglądzie:

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

Plakietka ad nie jest klikalna, ale jeśli najedziesz na nią kursorem, zobaczysz etykietkę z informacjami o tym, dlaczego element został zidentyfikowany jako reklama, np.:

• Script ancestry (Pochodzenie skryptu): skrypty, które brały udział w tworzeniu elementu.
• Reguły listy filtrów: konkretna reguła z listy filtrów (np. EasyList), która pasowała do elementu lub wczytanego przez niego zasobu.

Możesz też użyć karty Renderowanie , aby wyróżnić ramki reklam na czerwono.

Przewiń

Element HTML jest kontenerem przewijania, jeśli jego właściwość CSS overflow jest ustawiona na scroll lub auto, gdy jest wystarczająco dużo treści, aby spowodować przepełnienie. Takie elementy mają obok siebie plakietki scroll.

Scroll-snap

Kontenery przewijania mogą mieć właściwości CSS, które konfigurują punkty przyciągania. Takie elementy mają obok siebie plakietki scroll-snap, które przełączają odpowiednie nakładki.

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

1. Sprawdź element w podglądzie.
2. W drzewie DOM kliknij plakietkę scroll-snap obok elementu.
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. Takie elementy mają obok siebie plakietki container, które przełączają odpowiednie nakładki.

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 zmianę układu i nakładkę.

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

Aby dowiedzieć się, jak debugować zapytania o kontenery, przeczytaj artykuł Sprawdzanie i debugowanie zapytań o kontenery CSS.

Boks

Element HTML <slot> to symbol zastępczy, który możesz wypełnić własną treścią. W połączeniu z elementem <template> element <slot> umożliwia tworzenie oddzielnych drzew DOM i prezentowanie ich razem. Elementy treści boksu mają obok siebie plakietki ink_selectionslot, które służą jako linki do odpowiednich boksów.

Odkryj 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 boks.
3. Aby wrócić do treści boksu, kliknij plakietkę ink_selectionreveal.

Top-layer

Ta plakietka pomaga zrozumieć koncepcję warstwy najwyższej i ją wizualizować. Warstwa najwyższa renderuje treści na wszystkich innych warstwach, niezależnie od z-index. Gdy otworzysz element <dialog> za pomocą metody .showModal(), przeglądarka umieści go w warstwie najwyższej.

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

Elementy warstwy najwyższej mają obok siebie plakietki ink_selectiontop-layer (N), gdzie N to numer indeksu elementu. Plakietki są linkami do odpowiednich elementów w kontenerze #top-layer.

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

1. W podglądzie kliknij Open dialog (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 tagu zamykającym </html>.
4. Aby wrócić do elementu <dialog>, kliknij plakietkę ink_selectionreveal obok elementu lub jego elementu ::backdrop.

Multimedia

Plakietka media jest domyślnie wyłączona. Gdy jest włączona, 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 multimediów za pomocą panelu Multimedia.

Wyskakujące okienko

Wyskakujące okienko to dowolny element z atrybutem popover, który jest przydatny w przypadku wielu interaktywnych wzorców, w tym etykietek, alertów, powiadomień i innych. Takie elementy mają obok siebie plakietki popover.

Ta plakietka przełącza plakietkę top-layer obok niej, która zawiera linki do odpowiednich elementów w kontenerze #top-layer.

Odkryj plakietkę popover w tym podglądzie:

1. W podglądzie kliknij TOGGLE POPOVER (Przełącz wyskakujące okienko).
2. Sprawdź wyświetlone wyskakujące okienko.

3. W drzewie DOM kliknij plakietkę popover obok elementu <div popover>. Panel Elementy wyświetli plakietkę top-layer.

   

4. Wykonaj czynności opisane w sekcji Warstwa najwyższa.

Więcej informacji znajdziesz też na stronie https://web.dev/learn/css/popover-and-dialog.

Starting-style

Reguła@starting-style określa początkowe style elementu przed jego wyrenderowaniem na stronie. Jest to wymagane w przypadku elementów, które są animowane z display: none, ponieważ potrzebują stanu, z którego można je animować. Takie elementy mają obok siebie plakietki starting-style.

Ta plakietka przełącza style w regule @starting-style, dzięki czemu możesz zobaczyć animację w działaniu.

Odkryj plakietkę starting-style w tym podglądzie:

1. W podglądzie kliknij OPEN POPOVER (Otwórz wyskakujące okienko).
2. Sprawdź wyświetlone wyskakujące okienko.

3. W drzewie DOM przełącz plakietkę starting-style obok elementu <div popover>.

   

4. Obserwuj animację w działaniu i style stosowane na karcie Elementy > Style.

Więcej informacji znajdziesz też w artykule Animowanie wyskakujących okienek.

Custom-element

Niestandardowe elementy HTML zidentyfikowane przez nazwy tagów z łącznikami lub is="..." atrybuty w przypadku dostosowanych elementów wbudowanych mają obok siebie w drzewie DOM custom-element plakietki.

Kliknij plakietkę, aby przejść do odpowiedniego kodu w panelu Źródła.