Le panneau Calques vous aide à comprendre la composition de votre site Web et la façon dont le navigateur affiche le contenu. Analysez un diagramme 3D de votre site Web pour identifier les problèmes de rendu, corriger les bugs de défilement et optimiser les animations.
Présentation
Utilisez le panneau Layers (Calques) pour effectuer les opérations suivantes:
- Afficher les calques du document
- Inspectez les calques de document.
- Définissez des points d'arrêt de modification du DOM.
- Afficher les informations du profileur de rendus.
- Identifiez les éléments dont le défilement est lent.
Ouvrir le panneau "Calques"
Pour ouvrir le panneau Calques, procédez comme suit:
- Accédez aux outils de développement.
- Ouvrez le menu Command (Commande) en appuyant sur :
- macOS: Command+Maj+P
- Windows, Linux et ChromeOS: Ctrl+Maj+P
- Commencez à saisir
Layers, sélectionnez Afficher le panneau des calques, puis appuyez sur Entrée.
Vous pouvez également sélectionner more_vert Autres options > Plus d'outils > Panneau des calques en haut à droite.
De plus, le panneau Performances vous permet d'afficher les calques de chaque frame d'un enregistrement dans un onglet Calques. Pour en savoir plus, consultez Afficher des informations sur les calques.
Afficher les calques du document
La section la plus à gauche du panneau Calques répertorie tous les calques affichés du document dans une arborescence extensible. Cet arbre est mis à jour au fur et à mesure que vous parcourez la page. Les calques sont identifiés par leur sélecteur CSS ou par un nombre, suivi des dimensions de la couche en pixels.
Pointez sur une couche pour la mettre en surbrillance sur la page Web et dans le diagramme. Une info-bulle s'affiche sur la page avec les informations suivantes:
- Sélecteurs du calque.
- Dimensions de la couche, en pixels.
- Icône représentant la grille CSS ou la flexibilité, le cas échéant.
Inspecter les calques de document
Cliquez sur un calque pour afficher plus d'informations dans le volet Détails.
Selon la couche, les informations suivantes s'affichent:
- Taille
- Raisons de la composition
- Estimation de la mémoire
- Nombre de rendus
- Régions à défilement lent
- Contrainte de position persistante
Le schéma montre comment les calques sont empilés et disposés pour cette page, y compris les éléments situés en dehors du viewport.
Pour déplacer le diagramme:
- Utilisez les touches WASD pour déplacer le diagramme. Appuyez sur W pour faire un panoramique vers le haut, sur A pour faire un panoramique vers la gauche, sur S pour faire un panoramique vers le bas et sur D pour faire un panoramique vers la droite.
- Cliquez sur Mode panoramique drag_pan ou appuyez sur X, puis faites glisser le curseur pour vous déplacer le long des axes X et Y.
- Cliquez sur Mode de rotation 360° ou appuyez sur V, puis faites glisser le pointeur pour effectuer une rotation sur l'axe Z.
- Cliquez sur Réinitialiser la transformation zoom_in_map ou appuyez sur 0 pour rétablir le diagramme à sa position d'origine.
- Faites un zoom avant en appuyant sur Maj + + ou sur la molette de la souris vers le haut.
- Pour faire un zoom arrière, appuyez sur Maj + - ou sur la molette de la souris vers le bas.
Pour afficher l'élément DOM correspondant d'une couche dans le panneau "Éléments", effectuez un clic droit sur une couche dans le diagramme ou dans l'arborescence des couches, puis cliquez sur Afficher dans le panneau "Éléments".
De plus, le panneau Calques masque certains calques qui n'hébergent ni ne dessinent pas de contenu. Pour afficher ces calques, effectuez un clic droit sur l'arborescence des calques, puis sélectionnez Afficher les calques internes.
Définir des points d'arrêt de modification du DOM
Le panneau Calques vous permet de définir des points d'arrêt de modification du DOM.
Pour définir un point d'arrêt de modification du DOM, procédez comme suit:
- Effectuez un clic droit sur un calque dans l'arborescence des calques.
- Pointez sur Rupture, puis sélectionnez Modifications du sous-arbre, Modifications des attributs ou Suppression de nœud.
Vous trouverez la liste des points d'arrêt de modification du DOM dans:
- Éléments > onglet Points d'arrêt DOM.
- Section Sources > Points d'arrêt DOM (Réductible)
Pour en savoir plus sur les types de points d'arrêt, consultez Types de points d'arrêt de modification du DOM.
Afficher les informations du profileur de peinture
Le panneau Calques vous permet d'afficher des informations détaillées sur la peinture d'une couche et de représenter le contenu de la page Web sur le diagramme 3D.
Pour activer le Profileur de peinture, procédez comme suit:
- Cochez la case check_box Peintures dans la barre d'action.
- Sélectionnez un calque dans l'arborescence des calques.
- Cliquez sur Profiler de peinture en bas du volet Détails. Notez que cette option n'est pas disponible pour toutes les couches.
L'onglet Profiler s'ouvre avec des enregistrements de peinture et un histogramme représentant la distribution des coûts de peinture.
L'activation de Peintures permet également d'afficher la majeure partie du contenu de la page Web sur le diagramme.
Identifier les éléments dont le défilement est lent
Certains sites Web utilisent JavaScript pour détecter les événements de défilement ou tactiles sur des éléments d'une manière qui peut nuire à la vitesse de défilement. Pour identifier les calques contenant des écouteurs d'événements liés au défilement qui peuvent nuire aux performances, cochez la case check_box Rects de défilement lent.
Les calques susceptibles de ralentir le défilement sont surlignés en rose.