Déboguer la disposition avec l'Explorateur DOM

Article
06/05/2015

S'applique à Windows et Windows Phone

L'onglet Disposition de l'explorateur DOM affiche le modèle de boîte CSS de l'élément sélectionné d'une application du Windows Store ou d'une application du Windows Phone Store. Vous pouvez utiliser cette représentation visuelle du modèle de boîte pour identifier et modifier les valeurs relatives à la disposition qui affectent l'apparence des éléments.

Conseil

Les modifications que vous effectuez dans l'onglet Disposition ne sont pas définitives.Vous pouvez apporter des modifications permanentes à votre code source, puis actualiser votre application à l'aide du bouton Actualiser l'application Windows de la barre d'outils Déboguer.Ainsi, vous pouvez éviter de redémarrer le débogueur.

Pour utiliser l'Explorateur DOM pour modifier des aspects de la disposition qui ne sont pas visibles dans le modèle de boîte, consultez Démarrage rapide : déboguer du code HTML et CSS et Déboguer les styles CSS avec l'Explorateur DOM.

Exemple de résolution d'un problème de disposition

Cet exemple montre comment sélectionner un élément de liste dans le modèle Hub/Pivot, interpréter les valeurs du modèle de boîte qui figurent dans l'onglet Disposition, puis modifier l'une des valeurs de propriété pour résoudre un problème de disposition.

Pour résoudre le problème de disposition

Dans Visual Studio, créez une application de Store qui utilise le modèle de projet Hub/Pivot.
Dans le dossier partagé pages\hub, ouvrez hub.css.

Remplacez le code CSS suivant :

        .hubpage .hub .section4 .sub-image-row img {
            height: 95px;
            width: 130px;
        }

par le code CSS suivant :

        .hubpage .hub .section4 .sub-image-row img {
            height: 95px;
            width: 130px;
            margin-left: 5em;
        }

Sélectionnez le projet appName.WindowsPhone ou appName.Windows dans l'Explorateur de solutions, puis choisissez Définir comme projet de démarrage dans le menu contextuel du projet.
Selon votre projet de démarrage, sélectionnez Emulator 8.1 WVGA 4 pouces 512 Mo ou Simulateur dans la liste déroulante de la barre d'outils Déboguer (Ordinateur local est la valeur par défaut).
Appuyez sur F5 pour exécuter l'application en mode débogage :
Ouvrez Section 4 en faisant défiler ou glisser l'écran.

Conseil

Placez le simulateur ou l'émulateur Windows Phone juste à côté de la fenêtre Visual Studio afin de voir immédiatement les résultats de vos sélections et des modifications que vous apportez aux styles CSS.

Lors du chargement de Section 4, vous constatez que les images inférieures ne s'affichent pas correctement. Chaque image d'élément apparaît divisée en deux (la moitié gauche étant manquante).
Basculez vers Visual Studio et choisissez Sélectionner un élément dans l'explorateur DOM (ou appuyez sur Ctrl+B). Cela modifie le mode de sélection pour vous permettre de sélectionner un élément en cliquant dessus, et affiche l'application au premier plan. Le mode est restauré à la suite d'un clic.

Conseil

Vous pouvez aussi utiliser les touches de direction ou d'autres méthodes pour sélectionner directement les éléments HTML dans l'explorateur DOM.Pour plus d'informations sur la sélection des éléments, consultez Démarrage rapide : déboguer du code HTML et CSS.
Dans le simulateur ou l'émulateur Windows Phone, sélectionnez la moitié droite grisée des images coupées en deux. La mise en surbrillance apparaît autour de l'élément sélectionné, comme illustré ici dans l'émulateur Windows Phone :

Conseil

Le simulateur accepte que vous pointiez sur les éléments pour afficher la mise en surbrillance de la zone autour des éléments DOM avant que vous n'en sélectionniez un.L'émulateur Windows Phone ne prend pas en charge cette option.

Lorsque vous sélectionnez un élément DOM, l'explorateur DOM sélectionne automatiquement l'élément IMG correspondant dans Visual Studio. L'élément sélectionné dans l'Explorateur DOM se présente comme suit :
```
<img src="ms-appx://guid/images/gray.png> 
</img>
```
Cliquez sur l'onglet Disposition. Cet onglet montre le modèle de boîte de l'élément sélectionné, comme illustré ici dans l'émulateur Windows Phone.

Cette vue fournit des informations utiles sur l'élément :
- Les couleurs correspondent à la mise en surbrillance de zone qui apparaît dans le simulateur lorsque vous pointez sur des éléments. La couleur bleu représente les dimensions de l'élément <img>. La couleur brun tanné représente les valeurs de marge.
- La marge de gauche (margin-left) est définie, ce qui donne une indication sur la cause du problème, car elle correspond au symptôme (couleur noire dans la partie gauche des images).
- Les zones qui affichent des valeurs de 0 pixels (par exemple, Remplissage, Bordure et Marge) laissent penser que les propriétés CSS correspondantes ne sont probablement pas définies.
Pour voir comment la règle margin-left est appliquée, sélectionnez l'onglet Calculé et regardez sous la règle margin-left. Vous pouvez voir que la règle est définie avec une valeur 5em, mais la valeur calculée est égale à 66.66px ou 146.66px, en fonction de votre périphérique cible.

Conseil

L'onglet Calculé montre que la règle margin-left est définie dans le sélecteur CSS ..hubpage .hub. section4 .sub-image-row img, qui se trouve dans hub.css.Dans cette application de démonstration, c'est là que vous devez apporter la correction.

Vous pouvez également utiliser l'onglet Disposition pour tester des modifications apportées aux valeurs de disposition.
Dans l'onglet Disposition, sélectionnez 66.66 ou 146.66, qui apparaît dans la zone Marge, à gauche de la zone.
Tapez 0 et appuyez sur Entrée. (Vous pouvez également utiliser les touches haut et bas pour modifier la valeur.)
Sélectionnez les autres éléments <img> de l'explorateur DOM et modifiez leurs valeurs margin-left en 0.
Basculez vers le simulateur ou l'émulateur Windows Phone. Les valeurs margin-left mises à jour ont été appliquées aux images de Section 4. Ces valeurs sont aussi mises à jour dans l'onglet Calculé sous la règle margin-left.