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
W panelu Warstwy możesz:
- wyświetlać warstwy dokumentu.
- Sprawdzanie warstw dokumentu.
- Ustaw punkty przerwania zmian w DOM.
- Wyświetl informacje programu Paint Profiler.
- Identyfikowanie elementów, które spowalniają przewijanie.
Otwórz panel Warstwy
Aby otworzyć panel Warstwy:
- Otwórz Narzędzia deweloperskie.
- Otwórz menu Polecenia, naciskając:
- macOS: Command + Shift + P.
- Windows, Linux, ChromeOS: Control + Shift + P
- 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świetlić warstwy każdej klatki nagrania na karcie Warstwy. Więcej informacji znajdziesz w artykule Wyświetlanie informacji o warstwach.
Wyświetlanie warstw dokumentu
W lewej części panelu Warstwy znajduje się lista wszystkich wyrenderowanych warstw dokumentu w postaci drzewa, które można rozwijać. 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 ją wyróżnić 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 odpowiednich 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
- Szacunkowa 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 poruszać się 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, aby obrócić obiekt wzdłuż osi Z.
- Aby przywrócić diagram do jego pierwotnej pozycji, kliknij Resetuj transformację zoom_in_map lub naciśnij 0.
- Powiększ obraz, 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 przerwania zmian DOM.
Aby ustawić punkt zmiany w DOM, wykonaj te czynności:
- Kliknij prawym przyciskiem myszy warstwę w drzewie warstw.
- Najedź na Przerwij, a następnie wybierz Modyfikacje poddrzewa, Modyfikacje atrybutów lub Usuwanie węzła.
Listę punktów przerwania zmian w DOM znajdziesz w tych miejscach:
- Karta Elementy > Punkty przerwania DOM.
- Źródła > zwinięcie sekcji Punkty przerwania DOM.
Więcej informacji o typach punktów przerwania znajdziesz w artykule Typy punktów przerwania zmian w DOM.
Wyświetlanie informacji z programu Paint Profiler
W panelu Warstwy możesz wyświetlić szczegółowe informacje o warstwie i wyrenderować zawartość strony internetowej na diagramie 3D.
Aby aktywować profil Paint, wykonaj te czynności:
- Zaznacz pole check_box Paints na pasku działań.
- Wybierz warstwę z drzewa warstw.
- U dołu panelu Szczegóły kliknij Paint Profiler. Pamiętaj, że nie wszystkie warstwy mają tę opcję.
Otworzy się karta Profiler z rekordami kolorów i histogramem przedstawiającym rozkład kosztów kolorów.
Włączenie opcji Paints spowoduje również renderowanie większości treści strony internetowej na diagramie.
Identyfikowanie elementów ładujących się powoli
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 odbiorniki zdarzeń związanych z przewijaniem, które mogą utrudniać działanie, kliknij pole wyboru check_box Slow scroll rects.
Warstwy, które mogą powodować spowolnienie przewijania, są wyróżnione na różowo.