Le panneau Calques vous permet de 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:
- Affichez 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 des 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 : Cmd+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 soit par leur sélecteur CSS, soit par un nombre suivi de leurs dimensions 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 ou le flexible CSS, 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
- Motifs de composition
- Estimation de la mémoire
- Nombre de peintures
- 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 un panoramique vers le bas et sur D pour un panoramique vers la droite.
- Cliquez sur Mode Panoramique drag_pan ou appuyez sur X et faites glisser le curseur pour vous déplacer le long des axes X et Y.
- Cliquez sur Mode 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 la position d'origine du diagramme.
- Faites un zoom avant en appuyant sur Maj + + ou en faisant défiler 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 à un calque dans le panneau "Éléments", effectuez un clic droit sur un calque dans le schéma ou dans l'arborescence des calques, 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 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:
- Faites un clic droit sur un calque dans l'arborescence des calques.
- Pointez sur Arrêter, puis sélectionnez Modifications de sous-arborescence, Modifications d'attributs ou Suppression de nœuds.
Vous trouverez la liste des points d'arrêt liés aux modifications 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 Paints (Peins) 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 qui contiennent des écouteurs d'événements liés au défilement et qui peuvent nuire aux performances, cochez la case check_box Rectangles de défilement lent.
Les calques qui peuvent ralentir le défilement sont surlignés en rose.