Panel Warstwy: poznawaj warstwy witryny

Panel Warstwy pomaga zrozumieć kompozycję witryny i sposób renderowania treści przez przeglądarkę. Przeanalizuj diagram 3D swojej witryny, aby wykryć problemy z renderowaniem, naprawić błędy związane z przewijaniem i zoptymalizować animacje.

Omówienie

Panel Warstwy umożliwia:

• Wyświetlanie warstw dokumentu.
• Sprawdzanie warstw dokumentu.
• Ustaw punkty przerwania zmian DOM.
• Wyświetl informacje programu Paint Profiler.
• Identyfikowanie elementów, które spowalniają przewijanie.

Otwórz panel Warstwy

Aby otworzyć panel Warstwy, wykonaj te czynności:

1. Otwórz Narzędzia deweloperskie.
2. Otwórz menu Command, naciskając klawisze:
   • macOS: Command + Shift + P
   • Windows, Linux i ChromeOS: Control + Shift + P
3. Zacznij pisać Layers, wybierz Pokaż panel Warstwy i naciśnij Enter.

W prawym górnym rogu kliknij more_vert Więcej opcji > Więcej narzędzi > Panel Warstwy.

Dodatkowo w panelu Skuteczność możesz wyświetlać warstwy każdej klatki nagrania na karcie Warstwy. Więcej informacji znajdziesz w sekcji Wyświetlanie informacji o warstwach.

Wyświetlanie warstw dokumentu

W sekcji najdalej w lewo na panelu Warstwy wyświetla się w postaci drzewa, które można rozwijać, lista wszystkich wyrenderowanych warstw dokumentu. To drzewo aktualizuje się podczas przewijania strony. Warstwy są identyfikowane przez ich selektor CSS lub numer, a zaraz potem przez wymiary warstwy w pikselach.

Najedź kursorem na warstwę, aby wyróżnić ją na stronie internetowej i na diagramie. Na stronie pojawi się etykieta z tymi informacjami:

• Selektory warstwy.
• Wymiary warstwy w pikselach.
• Ikona symbolizująca siatkę CSS lub flex (w stosownych przypadkach).

Sprawdzanie warstw dokumentu

Kliknij warstwę, aby wyświetlić więcej informacji w panelu Szczegóły.

W zależności od warstwy wyświetlają się te informacje:

• Rozmiar
• Przyczyny komponowania
• Szacowana ilość pamięci
• Liczba wyrenderowań
• Regiony z wolnym przewijaniem
• Ograniczenie przyklejonego położenia

Diagram pokazuje, jak warstwy są ułożone i uporządkowane na tej stronie, w tym elementy znajdujące się poza obszarem widoku.

Aby przenieść diagram:

• Aby przesuwać diagram, użyj klawiszy WASD. Naciśnij W, aby przesunąć widok w górę, A, aby przesunąć widok w lewo, S, aby przesunąć widok w dół, i D, aby przesunąć widok w prawo.
• Aby przesuwać obiekt wzdłuż osi X i Y, kliknij tryb przesuwania drag_pan lub naciśnij X i przeciągnij.
• Kliknij Tryb obrotu 360 lub naciśnij V i przeciągnij widok, aby obracać widok wzdłuż osi Z.
• Kliknij Resetuj przekształcenie zoom_in_map lub naciśnij 0, aby zresetować diagram do jego pierwotnej pozycji.
• Powiększ widok, naciskając Shift + + lub kółko myszy w górę.
• Pomniejsz mapę, naciskając Shift + – lub kółko myszy w dół.

Aby zobaczyć element DOM odpowiadający warstwie w panelu Elementy, kliknij prawym przyciskiem myszy warstwę na diagramie lub w drzewie warstw i kliknij Pokaż w panelu Elementy.

Dodatkowo panel Warstwy ukrywa niektóre warstwy, które nie zawierają treści ani nie rysują żadnych elementów. Aby wyświetlić te warstwy, kliknij prawym przyciskiem drzewo warstw i wybierz Pokaż warstwy wewnętrzne.

Ustawianie punktów przerwania zmian w DOM

W panelu Warstwy możesz ustawiać punkty zmiany w DOM.

Aby ustawić punkt zmiany w DOM, wykonaj te czynności:

1. Kliknij prawym przyciskiem myszy warstwę w drzewie warstw.
2. Najedź na Przerwij, a następnie wybierz Modyfikacje poddrzewa, Modyfikacje atrybutów lub Usuwanie węzła.

Listę punktów przerwania zmian DOM znajdziesz w tych miejscach:

• Karta Elementy > Punkty przerwania DOM.
• Źródła > Punkty przerwania DOM – zwijana sekcja.

Więcej informacji o typach punktów przerwania znajdziesz w artykule Typy punktów przerwania zmiany DOM.

Wyświetl informacje o narzędziu do profilowania Paint

Panel Warstwy umożliwia wyświetlanie szczegółowych informacji o wyrenderowaniu warstwy i renderowaniu zawartości strony na diagramie 3D.

Aby aktywować profil Paint:

1. Zaznacz pole check_box Paints na pasku działań.
2. Wybierz warstwę z drzewa warstw.
3. U dołu panelu Szczegóły kliknij Paint Profiler. Pamiętaj, że nie wszystkie warstwy mają tę opcję.

Otworzy się karta Profiler z rekordami renderowania i histogramem obrazującym rozkład kosztów wyrenderowania.

Aktywowanie opcji Paints spowoduje również renderowanie większości treści strony internetowej na diagramie.

Zidentyfikuj elementy przewijające się wolniej

Niektóre witryny używają JavaScriptu do wykrywania zdarzeń przewijania lub dotykania elementów w sposób, który może negatywnie wpływać na szybkość przewijania. Aby zidentyfikować warstwy zawierające listenery zdarzeń związanych z przewijaniem, które mogą utrudniać działanie, kliknij pole wyboru check_box Slow scroll rects.

Warstwy, które mogą powodować powolne przewijanie, są podświetlone na różowo.