Włączaj i wyłączaj różne nakładki oraz przyspieszaj nawigację po drzewie DOM dzięki temu kompleksowemu przewodnikowi po plakietkach w panelu Elementy.
Wyświetlanie i ukrywanie odznak
Aby wyświetlić lub ukryć niektóre plakietki:
- Otwórz Narzędzia deweloperskie.
- Kliknij prawym przyciskiem myszy element w drzewie DOM i zaznacz co najmniej jedną plakietkę w menu Ustawienia plakietek.
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.
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):
- W Chrome kliknij prawym przyciskiem myszy stronę i wybierz Zbadaj.
- W panelu Elementy kliknij plakietkę
view-sourceobok tagu<html>. - 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:
- Sprawdź element w podglądzie.
- W drzewie DOM kliknij plakietkę
gridobok elementu i przyjrzyj się nakładce.
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, 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:
- Sprawdź element w podglądzie.
- W drzewie DOM kliknij plakietkę
subgridobok elementu i przyjrzyj się nakładce.
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 ma wartość 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:
- Sprawdź element w podglądzie.
- W drzewie DOM kliknij plakietkę
flexobok elementu i przyjrzyj się nakładce.
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.
Reklama
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:
- Sprawdź element w podglądzie.
- W drzewie DOM znajdź element z plakietką
ad.
Odznaka ad nie jest klikalna, ale jeśli najedziesz na nią kursorem, zobaczysz etykietkę z informacjami o tym, dlaczego element został rozpoznany jako reklama, np.:
- 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 zasobu, który został przez nią wczytany.
Możesz też użyć karty Renderowanie, aby 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.
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:
- Sprawdź element w podglądzie.
- W drzewie DOM kliknij plakietkę
scroll-snapobok elementu. - 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 znajdują się plakietki container, które włączają i wyłączają odpowiednie nakładki.
Przełącz nakładkę w tym podglądzie:
- Sprawdź element w podglądzie.
- W drzewie DOM kliknij plakietkę
containerobok elementu. - Spróbuj zmienić rozmiar elementu, przeciągając jego prawy dolny róg, i obserwuj zmianę układu i nakładki.
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 symbol zastępczy, który możesz wypełnić własnymi treściami. W połączeniu z elementem <template> element <slot> umożliwia tworzenie osobnych 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:
- Sprawdź element w podglądzie.
- W drzewie DOM kliknij plakietkę
slotobok elementu, aby znaleźć odpowiednie miejsce.
- Aby wrócić do treści slota, kliknij plakietkę
reveal.
Warstwa wierzchnia
Ta plakietka pomaga zrozumieć i wizualizować koncepcję najwyższej warstwy. Najwyższa warstwa renderuje treści na wszystkich innych warstwach, niezależnie od wartości 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 to linki do odpowiednich elementów w kontenerze #top-layer.
Odkryj plakietkę top-layer (N) w tym podglądzie:
- W podglądzie kliknij Otwórz okno.
- Sprawdź okno dialogowe.
- W drzewie DOM kliknij plakietkę
top-layer (1)obok elementu<dialog>. Panel Elementy przeniesie Cię do odpowiedniego elementu w kontenerze#top-layerpo tagu zamykającym</html>.
- Aby wrócić do elementu
<dialog>, kliknij plakietkęrevealobok 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.
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 przydatne w przypadku wielu wzorców interaktywnych, w tym etykietek, alertów, powiadomień i innych. Takie elementy mają obok siebie plakietki popover.
Ten identyfikator włącza identyfikator top-layer obok niego, który prowadzi do odpowiednich elementów w kontenerze #top-layer.
Zobacz plakietkę popover w tym podglądzie:
- W podglądzie kliknij PRZEŁĄCZ WYŚWIETLANIE W WYŚWIETLANYM OKIENKU.
- Sprawdź wyskakujące okienko.
W drzewie DOM kliknij plakietkę
popoverobok elementu<div popover>. W panelu Elementy zobaczysz plakietkętop-layer.
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 identyfikator przełącza style w regule @starting-style, dzięki czemu możesz zobaczyć animację w działaniu.
Zobacz plakietkę starting-style w tym podglądzie:
- W podglądzie kliknij OTWÓRZ WYŚWIETLANE OKIENKO.
- Sprawdź wyskakujące okienko.
W widoku drzewa DOM kliknij ikonę
starting-styleobok elementu<div popover>.
Obserwuj animację w działaniu i style stosowane na karcie Elementy > Style.
Więcej informacji znajdziesz też w artykule Animowanie wyskakujących okien.