Informacje o plakietkach

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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.

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.

Oznaczenie reklamy.

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.

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

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 z możliwością przewijania

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

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 slot, które służą jako linki do odpowiednich slotów.

Zobacz plakietkę slot w tym podglądzie:

  1. Sprawdź element w podglądzie.
  2. W drzewie DOM kliknij plakietkę slot obok elementu, aby znaleźć odpowiedni slot. Umieszczenie i ujawnienie plakietki.
  3. Aby wrócić do treści slotu, kliknij plakietkę reveal.

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 top-layer (N), gdzie N to numer indeksu elementu. Plakietki to linki do odpowiednich elementów w kontenerze #top-layer.

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

  1. W podglądzie kliknij Otwórz okno dialogowe.
  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>. Kontenery i plakietka na najwyższym poziomie.
  4. Aby wrócić do elementu <dialog>, kliknij plakietkę reveal 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.

Plakietka multimedialna włączona w ustawieniach plakietki i wyświetlana obok elementu wideo.

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