Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Utilisez l’outil d’affichage 3D pour déboguer des problèmes de DOM, d’index-z et de couches composites dans une page Web en faisant pivoter la page dans l’espace 3D. La visualisation 3D vous aide à comprendre la hiérarchie d’arborescence DOM, la hiérarchie d’arborescence de contexte d’empilement d’index z et les couches composites créées sur la page.
Contenu détaillé :
- Introduction
- Ouvrir l’outil d’affichage 3D
- Zoomer, faire un panoramique et faire pivoter le canevas 3D
- Onglet Couches composites
- Onglet Index-Z
- Onglet DOM
- Barre d’outils au-dessus du canevas 3D
- Contrôles de mouvement en bas à droite
- Voir également
Introduction
Utilisez l’outil d’affichage 3D pour déboguer des problèmes de DOM, d’index-z et de couches composites dans une page Web en faisant pivoter la page dans l’espace 3D. La visualisation 3D vous aide à comprendre la hiérarchie d’arborescence DOM, la hiérarchie d’arborescence de contexte d’empilement d’index z et les couches composites créées sur la page.
Sur la gauche, l’outil Affichage 3D comporte 3 onglets :
L’onglet Couches 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 l’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 de l’index-z 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.
À 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 d’affichage 3D
Vous pouvez ouvrir l’outil Affichage 3D dans la barre d’activité ou dans le panneau Affichage rapide .
Pour obtenir un maximum d’espace de toile, ouvrez l’outil Affichage 3D dans la barre d’activité.
Pour utiliser l’outil Éléments et l’outil Affichage 3D simultanément, ouvrez l’outil Affichage 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 Commande, l’option Afficher la vue 3D est indiquée comme s’ouvrant dans le panneau Affichage rapide .
Ouvrir l’outil Affichage 3D dans la barre d’activité
Ouvrez la page web que vous souhaitez visualiser en 3D. Par exemple, utilisez la page de démonstration du refuge 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 Commande+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 Plus d’outils (
). L’onglet Vue 3D s’ouvre dans la barre d’activité :
Ouvrir l’outil Affichage 3D dans le panneau Aperçu rapide
Ouvrez la page web que vous souhaitez visualiser en 3D. Par exemple, utilisez la page de démonstration du refuge 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 Commande+Option+I (macOS). DevTools s’ouvre.
Si le panneau Affichage rapide ne s’affiche pas, sélectionnez Personnaliser et contrôler DevTools (...), puis sélectionnez Activer/désactiver le panneau Affichage rapide. Ou, lorsque le focus est positionné 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 Plus d’outils (
). L’onglet Affichage 3D s’ouvre dans le panneau Affichage rapide :
Activer WebGPU pour le développement sur des machines sans GPU matériel
L’outil de vue 3D s’appuie sur l’API WebGPU pour accéder au GPU matériel hautes performances. Sur les machines sans GPU matériel, la solution de contournement consiste à activer les indicateurs suivants uniquement dans un environnement de développement.
Ces indicateurs ne sont pas des prérequis courants pour ouvrir l’outil d’affichage 3D . Si l’outil fonctionne sur votre ordinateur, maintenez les indicateurs à leurs paramètres par défaut.
Mise en garde : Soyez prudent lorsque vous activez ces indicateurs. L’indicateur enable-unsafe-webgpu permet une prise en charge WebGPU optimale sur les configurations non prises en charge et peut exposer des problèmes de sécurité aux sites web. Utilisez cet indicateur uniquement pour votre propre développement. L’indicateur ignore-gpu-blocklist remplace la liste de rendu logiciel intégrée du navigateur, ce qui permet l’accélération GPU sur les configurations système non prises en charge. Ces indicateurs affectent le navigateur, pas seulement l’outil d’affichage 3D .
Pour essayer cette solution de contournement :
Dans Microsoft Edge, enregistrez tout travail dans vos onglets ouverts.
Accédez à
edge://flags.ignore-gpu-blocklistRecherchez , puis définissez l’indicateur sur Activé. Vous pouvez également accéder directement àedge://flags/#ignore-gpu-blocklist.enable-unsafe-webgpuRecherchez , puis définissez l’indicateur sur Activé. Vous pouvez également accéder directement àedge://flags/#enable-unsafe-webgpu.Un bouton Redémarrer apparaît en bas à droite.
Cliquez sur le bouton Redémarrer .
Microsoft Edge redémarre.
Accédez à la page web que vous souhaitez visualiser.
Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.
DevTools s’ouvre.
Ouvrir l’outil Affichage 3D .
Déboguer la page web.
Une fois le débogage terminé, dans
edge://flags, définissez l’indicateurignore-gpu-blocklistet l’indicateur sur Parenable-unsafe-webgpudéfaut (ou Désactivé), puis cliquez sur le bouton Redémarrer en bas à droite.
Zoomer, faire un panoramique et faire pivoter le canevas 3D
Pour afficher la page web sous différents angles, vous pouvez zoomer, faire un panoramique et faire pivoter le canevas 3D affiché sur le côté droit de l’outil d’affichage 3D .
Zoom avant ou arrière de la page
Pour effectuer un zoom avant ou arrière sur la zone de dessin 3D, utilisez la molette de la souris ou le curseur en bas à droite.
Vue panoramique (bouton)
Pour décaler la page vers la gauche, la droite, le haut ou le bas, cliquez sur le bouton Affichage panoramique (
puis faites glisser la page sur le canevas 3D dans la direction souhaitée avec votre souris.
Faire pivoter l’affichage (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 la souris.
Pour faire pivoter la page à l’aide du clavier, cliquez dans le canevas 3D pour mettre le focus sur celle-ci de sorte 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 la flèche vers le haut ou vers le bas .
Les touches font pivoter la page, que les boutons Panoramique ou Rotation de l’affichage soient sélectionnés dans la barre d’outils.
Pour plus d’informations, consultez les autres sections de cette page :
Onglet Couches composites
Dans la vue Couches 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 leur fréquence de changement.
Dans le canevas 3D à droite, sélectionnez un élément de la page web. Dans l’onglet Couches composites , l’arborescence des couches se développe automatiquement et l’onglet Détails sous l’arborescence des couches affiche des informations sur la couche sélectionnée :
Faire défiler lentement les rectangles (case à cocher)
La case à cocher Défilement lent met en évidence les sections de la page qui provoquent 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 dans la page web plus lent qu’il ne pourrait l’être normalement.
Cette case à cocher met en surbrillance (en rose) les cases 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 évidence les rectangles lents sur la page directement (en jaune). Voir Rechercher les problèmes de performances de défilement en temps réel dans Référence des 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 d’expansion des couches
Développez cette arborescence pour afficher la liste des couches composites. Cliquez sur une couche pour afficher des informations détaillées à son sujet 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 du calque supérieur gauche du calque par rapport au calque supérieur gauche de la fenêtre d’affichage de la page. Par exemple, « 1034 x 28055 (à 0, 0) ».
Raisons de composition
Raisons pour lesquelles le moteur de rendu du navigateur a créé la couche. Par exemple : « Couche secondaire, pour abriter le contenu qui peut être défilé. »
Estimation de la mémoire
Mémoire consommée pour le calque sélectionné. Par exemple : « 116 Mo ».
Nombre de peinture
Le nombre de fois que 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 empilent des contextes ou qui sont positionnés le long de l’axe z :
Pour en savoir plus, consultez Empilement du contexte et Utilisation de l’index-z sur MDN.
Afficher le type d’éléments (section)
La section Afficher le type d’éléments dans l’onglet Index-Z 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 positionnés sur l’axe z. Cette vue est utile pour déboguer les problèmes avec des éléments mal positionnés sur l’axe z.
La case d’option Afficher uniquement les contextes d’empilement affiche uniquement les éléments de la page qui empilent des contextes. Cette vue est utile pour savoir rapidement quels éléments empilent des contextes sur la page web.
La case à cocher Afficher les étiquettes d’index-z affiche ou masque les étiquettes d’index-z dans le canevas 3D. Par défaut, cette case est cochée.
Type de couleur (section)
Dans l’onglet Index-Z , vous pouvez choisir parmi les modèles de couleurs suivants pour visualiser le DOM dans le canevas 3D :
Bouton radio Violet à Blanc : le canevas 3D affiche des éléments allant du violet au blanc.
Utiliser la case d’option de 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 boutons radio 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 d’index-z ajoutent des informations visuelles sur le canevas 3D, de sorte que selon les commentaires des utilisateurs, il y a moins d’options de couleur dans l’onglet d’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 sur la page Web. La coordonnée Z d’un élément est basée sur la profondeur d’imbrication 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 à côté du curseur indique la profondeur maximale des éléments affichés dans le canevas 3D. Le fait de faire glisser le curseur vers la gauche entraîne l’éloignement des couches les plus à l’extérieur jusqu’à ce qu’un niveau d’imbrication défini sur 1, qui n’affiche que l’élément le plus en arrière dans le DOM. Pour supprimer une partie de l’encombrement, faites glisser le curseur pour voir de plus près ce qui se passe dans les niveaux inférieurs.
Bouton Réinitialiser
Réinitialise le niveau d’imbrication du curseur de page à la valeur par défaut de la page.
Type de couleur (section)
Dans l’onglet DOM , vous pouvez choisir parmi les modèles de couleurs suivants pour visualiser le DOM dans le canevas 3D :
Bouton radio Violet à Blanc : le canevas 3D affiche des éléments allant du violet au blanc.
Bouton radio Bleu à jaune : le canevas 3D affiche des éléments allant du bleu au jaune.
Bouton radio Arc-en-ciel : le canevas 3D affiche des éléments tels que le violet, le bleu, le vert, le jaune, l’orange et le rouge.
Utiliser la texture d’écran bouton radio : restitue le contenu de la page Web (fichier couleur ou image) sur les éléments.
Utiliser la case d’option de 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 Retake instantané (
Z-index 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 page web. Par exemple, après avoir rétréci la fenêtre d’affichage ou lorsque vous avez basculé vers une vue d’émulation d’appareil, par émuler des appareils mobiles (émulation d’appareil).
Lorsque l’onglet Calques composites est sélectionné, ce bouton est omis, car la reprise de l’instantané se produit automatiquement lorsque vous redimensionnez la fenêtre.
Réinitialiser l’affichage (bouton)
Cliquez sur le bouton 
pour réinitialiser le panoramique et la rotation de la page.
Vue panoramique (bouton)
Pour décaler la page vers la gauche, la droite, le haut ou le bas, cliquez sur le bouton Affichage panoramique ( puis faites glisser la page sur le canevas 3D dans la direction souhaitée avec votre souris.
Faire pivoter l’affichage (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 la souris.
Pour faire pivoter la page à l’aide du clavier, cliquez dans le canevas 3D pour mettre le focus sur celle-ci de sorte 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 la flèche vers le haut ou vers le bas .
Les touches font pivoter la page, que les boutons Panoramique ou Rotation de l’affichage soient sélectionnés 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 ses parents ou enfants, sans afficher le reste des éléments de la page.
Utilisez ce bouton pour afficher l’élément que vous avez sélectionné dans le canevas 3D, tout en réduisant l’encombrement que des pages web complexes peuvent créer dans le canevas 3D.
Inclure les parents (case à cocher)
La case à cocher Inclure les parents contrôle si les éléments parents d’un élément de page sélectionné sont affichés dans le canevas 3D. La case Inclure les parents est cochée par défaut. Lorsque cette case 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 Index-Z ou DOM est sélectionné.
Inclure les 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 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 la case Inclure les parents et les enfants , puis cliquez sur le bouton Isoler l’élément sélectionné .
Contrôles de mouvement en bas à droite
Les commandes en bas à droite du canevas 3D fonctionnent de la même manière, quel que soit l’onglet que vous sélectionnez.
Curseur de zoom : effectue un zoom avant ou arrière de la page, comme la molette de défilement de la souris, ou le fait de faire 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 Droite : déplace la page vers la gauche, par rapport au système de coordonnées de la page.