Informacje o plakietkach

Sofia Emelianova
Sofia Emelianova
GitHub

Korzystając z tego obszernego przewodnika po plakietkach w panelu Elementy, możesz przełączać różne nakładki i przyspieszać nawigację po drzewie DOM.

Wyświetlanie i ukrywanie odznak

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

  1. Otwórz Narzędzia deweloperskie.
  2. Kliknij prawym przyciskiem myszy element w drzewie DOM i zaznacz co najmniej jedną plakietkę w menu Ustawienia plakietek.

Menu „Ustawienia plakietki”.

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

Wyświetl źródło

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

Plakietka „Wyświetl źródło”.

Ta plakietka zapewnia alternatywny przepływ pracy w stosunku do opcji Wyświetl źródło strony w menu kontekstowym strony w Chrome (kliknij prawym przyciskiem myszy):

  1. W Chrome kliknij prawym przyciskiem myszy stronę > 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. Obok takich elementów znajdują się plakietki grid, które włączają i wyłą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 sprawdź nakładkę.

Nakładka siatki.

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 podsieci, jeśli co najmniej jedna z jego właściwości grid-template-columns, grid-template-rows ma wartość subgrid. Obok takich elementów znajdują się plakietki subgrid, które włączają i wyłą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 sprawdź nakładkę.

Nakładka podsiatki.

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

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 włączają i wyłą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 sprawdź nakładkę.

Nakładka Flex.

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

Aby dowiedzieć się, jak debugować układy elastyczne, zapoznaj się z artykułem Sprawdzanie i debugowanie elastycznego kontenera CSS.

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

Odkryj reklamę w tym podglądzie:

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

Oznaczenie reklamy.

Odznaka ad nie jest klikalna, ale na karcie Renderowanie możesz podświetlić 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.

Przewiń plakietkę na węźle drzewa DOM.

Przewijanie z przyciąganiem

Kontenery przewijania mogą mieć właściwości CSS, które konfigurują punkty przyciągania. Obok takich elementów znajdują się plakietki scroll-snap, które włączają i wyłą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 przewijania i przyciągania.

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 znajdują się plakietki container, które włączają i wyłą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ładki.

Nakładka kontenera.

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

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

Odkryj plakietkę slot w tym podglądzie:

  1. Sprawdź element w podglądzie.
  2. W drzewie DOM kliknij plakietkę slot obok elementu, aby znaleźć odpowiednie miejsce. Wstawiaj i odkrywaj plakietki.
  3. Aby wrócić do treści slota, kliknij plakietkę reveal.

Top-layer

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

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

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

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

  1. W podglądzie kliknij Otwórz okno.
  2. Sprawdź okno dialogowe.
  3. W drzewie DOM kliknij plakietkę top-layer (1) obok elementu <dialog>. Panel Elementy przeniesie Cię do odpowiedniego elementu w kontenerze #top-layer po tagu zamykającym </html>. Kontener i plakietka najwyższej warstwy.
  4. Aby wrócić do elementu <dialog>, kliknij plakietkę reveal obok elementu lub jego ::backdrop.

Multimedia

Odznaka media jest domyślnie wyłączona. Gdy jest włączona, pojawia się obok elementów <audio> i <video>. Kliknij tę plakietkę, aby otworzyć panel Media i debugować multimedia.

Plakietka z mediami włączona w ustawieniach plakietek i wyświetlana obok elementu wideo.

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

Wyskakujące okienko

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

Ten identyfikator przełącza identyfikator top-layer obok niego, który prowadzi do odpowiednich elementów w kontenerze #top-layer.

Odkryj plakietkę popover w tym podglądzie:

  1. W podglądzie kliknij PRZEŁĄCZ WYŚWIETLANIE W WYŚWIETLANYM OKIENKU.
  2. Sprawdź wyskakujące okienko.

  3. W drzewie DOM kliknij plakietkę popover obok elementu <div popover>. W panelu Elementy zobaczysz plakietkę top-layer.

    Wyskakująca plakietka obok elementu z atrybutem wyskakującego okienka.

  4. Wykonaj czynności opisane w sekcji Najwyższa warstwa.

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

Styl początkowy

@starting-styleReguła określa początkowe style elementu, zanim zostanie on wyrenderowany na stronie. Jest to wymagane w przypadku elementów, które pojawiają się w animacji z display: none, ponieważ potrzebują stanu, z którego mogą się pojawić. Takie elementy mają obok siebie plakietki starting-style.

Ten element 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 OTWÓRZ WYŚWIETLANE OKIENKO.
  2. Sprawdź wyskakujące okienko.

  3. W drzewie DOM kliknij przełącznik starting-style obok elementu <div popover>.

    Odznaka stylu początkowego obok elementu z regułą @starting-style.

  4. Obserwuj animację i style stosowane na karcie Elementy > Style.

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