les éléments sont utilisés pour obtenir un certain style ou pour faire fonctionner une fonctionnalité basée sur JavaScript. Mais les choses peuvent rapidement devenir incontrôlables, et il n’est pas rare de se retrouver avec des arbres DOM très profondément imbriqués. Cela peut rendre beaucoup plus difficile le travail sur le code HTML de votre page, ainsi que son débogage. Mais cela peut même avoir des implications sur les performances. Plus l’arborescence DOM grandit, plus le navigateur devra recalculer les styles lorsque les choses changent.

Déboguer Outil Vue 3D

« L’outil de vue 3D est un moyen rapide de trouver ces conteneurs profondément imbriqués. Sélectionnez l’onglet DOM de l’outil Vue 3D pour voir l’arborescence DOM en 3 dimensions et découvrir quelle partie de votre page peut avoir trop de wrappers. Que vous y ayez placé un élément parce que vous prévoyez de le faire passer dans la page plus tard, ou que ce soit par accident, les trouver dans DevTools peut s’avérer assez difficile. Vous ne pouvez pas utiliser le sélecteur d’éléments pour les sélectionner dans la page, ils ne sont tout simplement pas accessibles. Utiliser le clic droit> inspecter n’est pas non plus une option dans ce cas, et utiliser le panneau Éléments pour les trouver peut être difficile.

« Il existe un moyen beaucoup plus rapide de le faire en utilisant l’outil. L’onglet DOM de l’outil vous donne une vue d’ensemble de la page Web entière et permet de faire un zoom arrière et de faire un panoramique autour de la scène jusqu’à ce que vous trouviez les éléments qui sont hors de la fenêtre d’affichage. Cliquez sur l’un des éléments pour accéder à l’outil Éléments. »

La source : Microsoft