Het deelvenster Lagen helpt u de samenstelling van uw website te begrijpen en hoe de browser inhoud weergeeft. Analyseer een 3D-diagram van uw website om weergaveproblemen te identificeren, scroll-bugs op te lossen en animaties te optimaliseren.
Overzicht
Gebruik het deelvenster Lagen om het volgende te doen:
- Bekijk documentlagen.
- Inspecteer documentlagen.
- Stel DOM-wijzigingsbreekpunten in.
- Bekijk Paint Profiler-informatie.
- Identificeer langzaam scrollende elementen.
Open het deelvenster Lagen
Volg deze stappen om het deelvenster Lagen te openen:
- Open DevTools .
- Open het Commandomenu door op te drukken:
- macOS: Command + Shift + P
- Windows, Linux, ChromeOS: Control + Shift + P
- Begin met het typen van
Layers, selecteer het paneel Lagen tonen en druk op Enter .
U kunt ook in de rechterbovenhoek more_vert Meer opties > Meer hulpmiddelen > deelvenster Lagen selecteren.
Bovendien kunt u in het deelvenster Prestaties de lagen van elk frame van een opname bekijken op een tabblad Lagen . Zie Lageninformatie bekijken voor meer informatie.
Bekijk documentlagen
In het meest linkse gedeelte van het deelvenster Lagen worden alle gerenderde lagen van het document weergegeven in een uitvouwbare boomstructuur. Deze boomstructuur wordt bijgewerkt terwijl u door de pagina navigeert. Lagen worden geïdentificeerd door hun CSS-selector of met een nummer, gevolgd door de afmetingen van de laag in pixels.
Beweeg over een laag om deze op de webpagina en in het diagram te markeren. Er verschijnt een tooltip op de pagina met de volgende informatie:
- De selectoren van de laag.
- De afmetingen van de laag, in pixels.
- Een pictogram dat CSS-raster of flex vertegenwoordigt, indien relevant.
Inspecteer documentlagen
Klik op een laag om meer informatie weer te geven in het detailvenster .
Afhankelijk van de laag verschijnt de volgende informatie:
- Maat
- Redenen voor het samenstellen
- Geheugenschatting
- Aantal verf
- Langzaam scrollende regio's
- Kleverige positiebeperking
Het diagram laat zien hoe lagen voor deze pagina zijn gestapeld en gerangschikt, inclusief elementen die buiten de viewport zijn geplaatst.
Om het diagram te verplaatsen:
- Gebruik WASD om het diagram te verplaatsen. Druk op W om omhoog te pannen, A om naar links te pannen, S om omlaag te pannen en D om naar rechts te pannen.
- Klik op Panmodus drag_pan of druk op X en sleep om langs de X- en Y-assen te bewegen.
- Klik op Roteermodus 360 of druk op V en sleep om langs de Z-as te roteren.
- Klik op Reset Transform zoom_in_map of druk op 0 om het diagram terug te zetten naar de oorspronkelijke positie.
- Zoom in door op shift + + te drukken of met het muiswiel omhoog.
- Zoom uit door op shift + - te drukken of met het muiswiel omlaag.
Om het corresponderende DOM-element van een laag in het paneel Elementen te zien, klikt u met de rechtermuisknop op een laag in het diagram of in de lagenboom en klikt u op Onthullen in het paneel Elementen .
Bovendien verbergt het deelvenster Lagen bepaalde lagen die geen inhoud hosten of tekenen. Om deze lagen weer te geven, klikt u met de rechtermuisknop op de lagenboom en selecteert u Interne lagen tonen .
Stel DOM-wijzigingsbreekpunten in
In het deelvenster Lagen kunt u DOM-wijzigingsbreekpunten instellen.
Volg deze stappen om een DOM-wijzigingsbreekpunt in te stellen:
- Klik met de rechtermuisknop op een laag in de lagenboom.
- Beweeg de muis over Onderbreken aan en selecteer Substructuurwijzigingen , Attribuutwijzigingen of Knooppuntverwijdering .
Zoek een lijst met DOM-wijzigingsbreekpunten in:
- Elementen > tabblad DOM-breekpunten .
- Bronnen > Opvouwbare sectie DOM-breekpunten .
Zie Typen DOM-wijzigingsbreekpunten voor meer informatie over de typen breekpunten.
Bekijk Paint Profiler-informatie
In het deelvenster Lagen kunt u gedetailleerde verfinformatie over een laag bekijken en de inhoud van de webpagina weergeven in het 3D-diagram.
Volg deze stappen om Paint Profiler te activeren:
- Schakel het selectievakje Verven in de actiebalk in.
- Selecteer een laag uit de lagenboom.
- Klik op Paint Profiler onder aan het detailvenster . Houd er rekening mee dat niet alle lagen deze optie hebben.
Het tabblad Profiler wordt geopend met verfrecords en een histogram dat de verdeling van de verfkosten weergeeft.
Als u Paints activeert, wordt ook het grootste deel van de inhoud van de webpagina in het diagram weergegeven.
Identificeer langzaam scrollende elementen
Sommige websites gebruiken JavaScript om scroll- of aanraakgebeurtenissen op elementen te detecteren op een manier die de scrollsnelheid negatief kan beïnvloeden. Om lagen te identificeren die gebeurtenislisteners bevatten die verband houden met scrollen en die de prestaties kunnen belemmeren, klikt u op het selectievakje check_box Slow scroll rects .
Lagen die langzaam scrollen kunnen veroorzaken, zijn roze gemarkeerd.