Microsoft Edge DevTools améliore l’outil de vue 3D pour visualiser les problèmes de développement Web

Microsoft Edge DevTools améliore l’outil de vue 3D pour visualiser les problèmes de développement Web

Microsoft a annoncé de grandes améliorations à l’outil 3D Viewer, qui fait partie des outils de développement. L’outil obtient de nombreuses améliorations de performances qui devraient aider les développeurs Web à identifier, corriger et améliorer les multiples éléments qui composent collectivement un site Web.

L’outil de vue 3D s’est avéré très utile pour visualiser et résoudre les problèmes de développement Web courants tels que la complexité du DOM, les barres de défilement indésirables ou les problèmes de superposition d’index z. L’outil de vue 3D ainsi que les DevTools ne sont évidemment pas destinés à l’internaute moyen. Cependant, ceux qui utilisent déjà les outils de développement devraient bénéficier des nouvelles fonctionnalités , a assuré Microsoft.

L’outil Vue 3D a toujours été l’un des moyens les plus rapides de trouver des conteneurs profondément imbriqués. L’onglet DOM de l’outil Vue 3D affiche rapidement l’arborescence DOM en 3 dimensions et aide les développeurs à déterminer quelle partie de votre page peut avoir trop de wrappers.

L’onglet DOM de l’outil donne également aux développeurs un aperçu de l’intégralité de la page Web et leur permet de faire un zoom arrière et de faire un panoramique autour de la scène jusqu’à ce que les éléments extérieurs à la fenêtre d’affichage deviennent visibles. Cliquer sur l’un des éléments permet aux développeurs d’accéder directement à l’outil Éléments.

Débogage des problèmes d’empilement de z-index :

L’outil Vue 3D dispose d’un onglet Z-index qui rend l’exploration plus facile et plus intuitive. L’outil vous permet de voir quels éléments sont des contextes d’empilement et comment les éléments sont empilés le long du z-index. Cela peut vous aider à trouver rapidement des problèmes courants.

Débogage des problèmes de performances avec les groupes de couches :

Cette nouvelle fonctionnalité divise une page Web en un nombre correct ou optimisé de couches. Cela améliore considérablement les performances, en particulier lorsque certains composants s’animent ou changent indépendamment des autres.

Microsoft a ajouté un nouvel onglet « Couches composites » pour détecter les couches créées. La barre latérale sur la gauche affiche une liste de calques, et survoler chacun d’eux le met en surbrillance dans la scène 3D. Le panneau mettra en évidence des informations importantes sur les calques, telles que la taille et la mémoire nécessaires pour les rendre.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *