Parcourir les couches de pages web, z-index et DOM à l’aide de l’outil Affichage 3D
Utilisez l’outil Vue 3D pour déboguer les problèmes dom, z-index et de couche composite dans une page web en faisant pivoter la page dans l’espace 3D. La visualisation 3D vous aide à comprendre la hiérarchie de l’arborescence DOM, la hiérarchie de contexte d’empilement z-index et les couches composites créées sur la page.
Sur la gauche, l’outil Vue 3D comporte 3 onglets :
- L’onglet Calques composites affiche les couches composites créées par le navigateur pour votre page web. Chaque couche inclut un rendu réaliste du contenu de la couche, pour une expérience complète lorsque vous déplacez la page dans un espace 3D.
- L’onglet Index Z affiche une représentation 3D de l’arborescence de contexte d’empilement. Utilisez cet onglet pour déboguer les problèmes d’empilement z-index sur votre page web.
- L’onglet DOM affiche une représentation 3D de l’arborescence DOM. Utilisez cet onglet pour explorer le DOM dans son ensemble, avec tous les éléments facilement accessibles.
Sur la droite, le canevas 3D représente la page web en fonction de l’onglet et des options que vous sélectionnez.
Vidéo : Déboguer le web en 3D
Ouvrir l’outil Vue 3D
Vous pouvez ouvrir l’outil Affichage 3D dans la barre d’activités ou dans le panneau Affichage rapide .
Pour obtenir un espace de canevas maximal, ouvrez l’outil Vue 3D dans la barre d’activités.
Pour utiliser l’outil Éléments et l’outil Vue 3D en même temps, ouvrez l’outil Vue 3D dans le panneau Affichage rapide . Cela vous permet d’afficher les éléments de l’arborescence DOM représentés dans le canevas 3D. Il s’agit de la valeur par défaut ; Dans le menu Commandes, l’option Afficher la vue 3D est indiquée comme ouvrante dans le panneau Affichage rapide .
Ouvrir l’outil Vue 3D dans la barre d’activités
Ouvrez la page web que vous souhaitez visualiser en 3D. Par exemple, utilisez la page de démonstration des refuges pour animaux .
Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.
Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Affichage 3D . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils (
). L’onglet Affichage 3D s’ouvre dans la barre d’activité :
Ouvrez l’outil Vue 3D dans le panneau Affichage rapide
Ouvrez la page web que vous souhaitez visualiser en 3D. Par exemple, utilisez la page de démonstration des refuges pour animaux .
Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.
Si le panneau Affichage rapide n’est pas affiché, sélectionnez Personnaliser et contrôler DevTools (...), puis sélectionnez Activer/désactiver le panneau Affichage rapide. Ou, lorsque le focus est sur DevTools, appuyez sur Échap.
Dans la barre d’outils Affichage rapide , sélectionnez l’onglet Affichage 3D . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils (
). L’onglet Vue 3D s’ouvre dans le panneau Affichage rapide :
Zoom, panoramique et rotation du canevas 3D
Pour afficher la page web sous différents angles, vous pouvez effectuer un zoom, un panoramique et faire pivoter le canevas 3D affiché sur le côté droit de l’outil Vue 3D .
Zoom avant ou arrière de la page
Pour effectuer un zoom avant ou arrière sur la page web sur le canevas 3D, utilisez la roulette de défilement de la souris ou utilisez le curseur en bas à droite.
Panoramique (bouton)
Pour déplacer la page vers la gauche, la droite, le haut ou le bas, cliquez sur le bouton Panoramique (
») puis faites glisser la page sur le canevas 3D dans la direction souhaitée avec la souris.
Faire pivoter la vue (bouton)
Pour faire pivoter la page à l’aide de la souris, cliquez sur le bouton Faire pivoter la vue (
») puis faites glisser la page sur le canevas 3D dans l’angle souhaité avec votre souris.
Pour faire pivoter la page à l’aide du clavier, cliquez sur le canevas 3D pour y mettre le focus afin qu’une bordure noire apparaisse, puis appuyez sur les touches de direction.
- Pour faire pivoter la page horizontalement, appuyez sur la flèche gauche ou la flèche droite .
- Pour faire pivoter la page verticalement, appuyez sur flèche haut ou flèche bas .
Les touches font pivoter la page, que le bouton Panoramique ou Rotation de l’affichage soit sélectionné dans la barre d’outils.
Pour plus d’informations, consultez les autres sections de cette page :
Onglet Calques composites
Dans la vue Calques composites, le canevas 3D affiche la liste des couches créées par le moteur de rendu du navigateur pour la page web.
Utilisez la vue Couches composites pour analyser le nombre de couches créées par votre code CSS, leur taille et la fréquence à laquelle elles changent.
Sur le canevas 3D à droite, sélectionnez un élément de la page web. Sous l’onglet Calques composites , l’arborescence des couches se développe automatiquement, et l’onglet Détails sous l’arborescence des couches affiche des informations sur le calque sélectionné :
Rects à défilement lent (case à cocher)
La case à cocher Défilement lent rects met en évidence les sections de la page qui entraînent un défilement lent. Cette case à cocher est utile pour examiner les problèmes de performances. Certaines pages web utilisent JavaScript pour détecter le défilement (ou l’interaction tactile) sur certains éléments de page d’une manière qui peut rendre le défilement de la page web plus lent que d’habitude.
Cette case à cocher met en surbrillance (en rose) les zones de la page web rendue qui peuvent entraîner ces problèmes de performances.
Cette case à cocher est similaire à la case à cocher Problèmes de performances de défilement dans l’outil Rendu , qui met en surbrillance les rects lents directement sur la page (en jaune). Consultez Rechercher les problèmes de performances de défilement en temps réel dans Informations de référence sur les fonctionnalités de performances. Les deux cases à cocher sont basées sur les mêmes informations de débogage, mais ces deux outils présentent ces informations différemment.
Peintures (case à cocher)
Restitue le contenu de la page web (fichier couleur ou image) sur les éléments.
Arborescence de l’expandeur de couches
Développez cette arborescence pour afficher la liste des couches composites. Cliquez sur une couche pour afficher des informations détaillées sur celle-ci dans le volet Informations sur les détails .
Détails (volet d’informations)
Le volet Informations détaillées sous le volet Couches composites contient les champs suivants.
Taille
Largeur, puis hauteur du calque composite sélectionné, ainsi que l’emplacement de l’angle supérieur gauche du calque par rapport au coin supérieur gauche de la fenêtre d’affichage de la page. Par exemple, « 1034 x 28055 (à 0, 0) ».
Raisons de la composition
Raisons pour lesquelles le moteur de rendu du navigateur a créé la couche. Par exemple : « Couche secondaire, pour héberger le contenu qui peut faire l’objet d’un défilement ».
Estimation de la mémoire
Mémoire consommée pour la couche sélectionnée. Par exemple : « 116 Mo ».
Nombre de peintures
Nombre de fois où le calque sélectionné a été peint par le moteur de rendu.
Onglet Index Z
L’onglet Index Z affiche uniquement les éléments de la page web qui sont des contextes d’empilement ou qui sont positionnés le long de l’axe z :
Pour plus d’informations, consultez Contexte d’empilement et Utilisation de z-index sur MDN.
Afficher le type d’éléments (section)
La section Afficher le type d’éléments de l’onglet Z-index contrôle les éléments de la page qui sont affichés dans le canevas 3D.
La case d’option Afficher tout affiche à la fois les éléments de contexte d’empilement et les éléments qui sont positionnés sur l’axe z. Cette vue est utile pour déboguer les problèmes liés aux éléments qui sont mal positionnés sur l’axe des z.
La case d’option Afficher uniquement les contextes d’empilement affiche uniquement les éléments de page qui sont des contextes d’empilement. Cette vue est utile pour identifier rapidement les éléments qui empilent des contextes sur la page web.
La case à cocher Afficher les étiquettes z-index affiche ou masque les étiquettes z-index dans le canevas 3D. Par défaut, cette case à cocher est cochée.
Type de couleur (section)
Dans l’onglet Index Z , vous pouvez choisir parmi les jeux de couleurs suivants pour visualiser le DOM dans le canevas 3D :
Bouton d’option violet à blanc : la zone de dessin 3D affiche des éléments allant du violet au blanc.
Case d’option Utiliser la couleur d’arrière-plan : le canevas 3D affiche les éléments rendus à l’aide de la couleur d’arrière-plan définie pour chaque élément.
Ces cases d’option vous permettent de basculer entre les options et de choisir le type de couleur. Le type de couleur est soit le plus approprié pour votre projet, soit celui qui vous plaît le plus. Les étiquettes z-index ajoutent des informations visuelles sur le canevas 3D. Par conséquent, selon les commentaires de l’utilisateur, il y a moins d’options de couleur dans l’onglet Index Z que dans l’onglet DOM .
Onglet DOM
L’onglet DOM fournit une vue de débogage générale de l’arborescence DOM. L’onglet DOM affiche tous les éléments de la page web dans le canevas 3D :
Les coordonnées X et Y d’un élément dans le canevas 3D correspondent aux coordonnées de l’élément dans la page web. La coordonnée Z d’un élément est basée sur la profondeur imbriquée de l’élément dans l’arborescence DOM.
Niveau d’imbrication pour la page (curseur)
Le curseur contrôle le nombre de niveaux de l’arborescence DOM affichés dans le canevas 3D. La valeur affichée en regard du curseur indique la profondeur maximale des éléments affichés dans le canevas 3D. Faire glisser le curseur vers la gauche entraîne le décollement des couches les plus externes jusqu’à ce que vous restiez avec un niveau d’imbrication défini sur 1, qui affiche uniquement l’élément le plus éloigné dans le DOM. Pour supprimer une partie de l’encombrement, faites glisser le curseur pour examiner de plus près ce qui se passe dans les niveaux inférieurs.
Bouton Réinitialiser
Réinitialise le niveau d’imbrication pour le curseur de page à la valeur par défaut de la page.
Type de couleur (section)
Dans l’onglet DOM , vous pouvez choisir parmi les jeux de couleurs suivants de visualiser le DOM dans le canevas 3D :
Bouton d’option violet à blanc : la zone de dessin 3D affiche des éléments allant du violet au blanc.
Bouton d’option Bleu à Jaune : le canevas 3D affiche des éléments allant du bleu au jaune.
Case d’option Arc-en-ciel : la zone de dessin 3D affiche des éléments comme violet, bleu, vert, jaune, orange et rouge.
Utiliser la case d’option de texture d’écran : affiche le contenu de la page web (fichier couleur ou image) sur les éléments.
Case d’option Utiliser la couleur d’arrière-plan : le canevas 3D affiche les éléments rendus à l’aide de la couleur d’arrière-plan définie pour chaque élément.
Barre d’outils au-dessus du canevas 3D
Reprendre l’instantané (bouton)
Cliquez sur le bouton Reprendre l’instantané (
dans l’onglet DOM ou l’onglet Index Z pour actualiser la représentation 3D de l’arborescence DOM ou de l’arborescence de contexte d’empilement pour qu’elle corresponde à la dernière fenêtre d’affichage de la page web. Par exemple, après avoir rétréci la fenêtre d’affichage ou lorsque vous basculez vers une vue Émulation d’appareil, par Émuler des appareils mobiles (émulation d’appareil) .
Lorsque l’onglet Couches composites est sélectionné, ce bouton est omis, car la reprise de l’instantané se produit automatiquement lorsque vous redimensionnez la fenêtre d’affichage.
Réinitialiser l’affichage (bouton)
Cliquez sur le bouton Réinitialiser l’affichage (
pour réinitialiser le panoramique et la rotation de la page.
Panoramique (bouton)
Pour déplacer la page vers la gauche, la droite, le haut ou le bas, cliquez sur le bouton Panoramique ( ») puis faites glisser la page sur le canevas 3D dans la direction souhaitée avec la souris.
Faire pivoter la vue (bouton)
Pour faire pivoter la page à l’aide de la souris, cliquez sur le bouton Faire pivoter la vue ( ») puis faites glisser la page sur le canevas 3D dans l’angle souhaité avec votre souris.
Pour faire pivoter la page à l’aide du clavier, cliquez sur le canevas 3D pour y mettre le focus afin qu’une bordure noire apparaisse, puis appuyez sur les touches de direction.
- Pour faire pivoter la page horizontalement, appuyez sur la flèche gauche ou la flèche droite .
- Pour faire pivoter la page verticalement, appuyez sur flèche haut ou flèche bas .
Les touches font pivoter la page, que le bouton Panoramique ou Rotation de l’affichage soit sélectionné dans la barre d’outils.
Isoler l’élément sélectionné (bouton et section)
Au lieu d’afficher tous les éléments DOM de la page dans le canevas 3D, vous pouvez vous concentrer sur l’affichage d’une partie du DOM.
Sélectionnez un élément de la page web dans le canevas 3D, puis cliquez sur le bouton Isoler l’élément sélectionné . Le canevas 3D affiche l’élément sélectionné et les parents ou les enfants de l’élément, sans afficher le reste des éléments de page.
Utilisez ce bouton pour afficher l’élément que vous avez sélectionné sur le canevas 3D, tout en réduisant l’encombrement que les pages web complexes peuvent créer dans le canevas 3D.
Inclure les parents (case à cocher)
La case à cocher Inclure les parents détermine si les éléments parents d’un élément de page sélectionné sont affichés dans le canevas 3D. La case à cocher Inclure les parents est activée par défaut. Lorsque cette case à cocher est cochée, pour afficher un élément et l’un de ses éléments parents sur le canevas 3D, sélectionnez un élément dans le canevas 3D ou dans l’outil Éléments , puis cliquez sur le bouton Isoler l’élément sélectionné .
Cette case à cocher s’affiche lorsque l’onglet Z-index ou DOM est sélectionné.
Inclure des enfants (case à cocher)
La case à cocher Inclure les enfants s’affiche uniquement lorsque l’onglet DOM est sélectionné.
Pour afficher uniquement l’élément DOM que vous avez sélectionné, ainsi que les parents et les enfants de l’élément :
- Cochez les cases Inclure les parents et Inclure les enfants , puis cliquez sur le bouton Isoler l’élément sélectionné . Il s’agit de la valeur par défaut.
Pour afficher uniquement l’élément DOM que vous avez sélectionné, ainsi que les éléments parents de l’élément, mais pas les éléments enfants de l’élément :
- Cochez la case Inclure les parents , décochez la case Inclure les enfants , puis cliquez sur le bouton Isoler l’élément sélectionné .
Pour afficher uniquement l’élément DOM que vous avez sélectionné, ainsi que les éléments enfants de l’élément, mais pas les éléments parents de l’élément :
- Décochez la case Inclure les parents , cochez la case Inclure les enfants , puis cliquez sur le bouton Isoler l’élément sélectionné .
Pour afficher uniquement l’élément DOM que vous avez sélectionné, sans ses éléments parents ou enfants :
- Décochez les cases Inclure les parents et Inclure les enfants , puis cliquez sur le bouton Isoler l’élément sélectionné .
Contrôles de mouvement en bas à droite
Les contrôles en bas à droite du canevas 3D fonctionnent de la même façon, quel que soit l’onglet que vous sélectionnez.
Curseur de zoom : effectue un zoom avant ou arrière de la page, de la même façon que la roulette de défilement de la souris, ou en faisant glisser deux doigts sur le pavé tactile.
Bouton Haut : déplace la page vers le haut par rapport au système de coordonnées de la page.
Bouton Bas : déplace la page vers le bas, par rapport au système de coordonnées de la page.
Bouton gauche : déplace la page vers la droite, par rapport au système de coordonnées de la page.
Bouton droit : déplace la page vers la gauche, par rapport au système de coordonnées de la page.