Partager via

Déboguer les styles CSS avec l'Explorateur DOM

  • Article

S'applique à Windows et Windows Phone

Lorsque vous déboguez des applications Windows Store ou Windows Phone Store, vous pouvez afficher et modifier les règles CSS pour les éléments DOM sélectionnés et leurs éléments enfants.

Les onglets Styles et Calculé de l'explorateur DOM affichent les règles CSS qui s'appliquent à un élément sélectionné. Les règles sont affichées dans l'ordre de leur spécificité en fonction des règles de priorité CSS. Les règles en haut d'un sélecteur ou d'un style dans un onglet (les règles les plus spécifiques) sont les dernières à être appliquées à l'élément sélectionné, alors que les règles au bas d'un sélecteur ou d'un style sont les premières appliquées. Lorsque les règles sont appliquées, elles remplacent les règles précédemment appliquées.

Les onglets Styles, Calculé et Modifications fournissent différentes vues des informations de style.

  • Utilisez l'onglet Styles pour afficher les règles organisées par nom de sélecteur CSS, tel que html, body. Vous pouvez également utiliser cet onglet pour activer ou désactiver des styles spécifiques, pour modifier manuellement des valeurs et pour voir les résultats immédiats de ces modifications.

  • Utilisez l'onglet Calculé pour afficher les valeurs calculées d'un style. Par exemple, si vous définissez une taille de 1em, la valeur calculée par Internet Explorer peut être 16px. Les styles de cet onglet sont organisés par nom, tel que height. Vous pouvez également utiliser cet onglet pour activer ou désactiver des styles spécifiques, pour modifier manuellement des valeurs et pour voir les résultats immédiats de ces modifications.

    Notes

    Dans Visual Studio 2013 Update 2, les informations fournies dans l'onglet Suivi ont été fusionnées avec celles de l'onglet Calculé et l'onglet Suivi a été supprimé.

  • Utilisez l'onglet Modifications pour identifier et suivre les styles CSS que vous avez modifiés pendant une session de débogage.

Conseil

Les modifications que vous effectuez dans les onglets Styles et Calculé ne sont pas définitives.Elles ne sont pas conservées lorsque vous arrêtez le débogage.Pour modifier le code source et recharger les pages sans arrêter ni redémarrer le débogueur, actualisez votre application à l'aide du bouton Bouton d'actualisation de l'application Windows (Actualiser l'application Windows) dans la barre d'outils Déboguer.Pour plus d'informations, consultez Actualiser une application (JavaScript).

Exemple de définition d'une règle CSS

Cet exemple montre comment examiner les règles CSS et déboguer un problème de style. Pour cet exemple, supposons que vous souhaitez modifier la couleur d'une police utilisée pour afficher les titres de groupe dans le modèle Application partagée Windows Store.

Notes

Cet exemple montre une application Windows Store, mais toutes les fonctionnalités de l'Explorateur DOM présentées s'appliquent également aux applications Windows Phone Store.

Pour afficher et modifier les règles CSS

  1. Dans Visual Studio, créez une application Windows Store avec JavaScript et HTML dans le modèle de projet Application partagée.

  2. Dans l'Explorateur de solutions, ouvrez items.css qui se trouve dans le dossier pages.

  3. Remplacez le code CSS suivant :

        .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
    }

    par le code :

        .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
        color: #ff6a00;
    }

    Cela ajoute un style qui spécifie la couleur #ff6a00 (orange) pour chaque élément de la liste. Le sélecteur CSS, .itemspage .itemslist .item, indique un ensemble de noms de classe pour les éléments DIV dans items.html, qui apparaissent sous forme d'éléments imbriqués dans le modèle DOM actif. L'élément DIV item spécifie les éléments de la liste.

  4. Sélectionnez Simulateur dans la liste déroulante de la barre d'outils Déboguer (Ordinateur local est la valeur par défaut).

    Sélectionner la liste cible de débogage

  5. Appuyez sur F5 pour exécuter l'application en mode débogage :

    Lorsque le chargement de l'application est terminé, examinez les en-têtes des éléments de la liste, tels que Titre de groupe : 1. La couleur est inchangée, donc la tentative d'application d'une couleur orange aux titres n'a pas fonctionné. Nous identifierons le problème et le résoudrons à l'aide des onglets CSS de l'explorateur DOM.

    Conseil

    Une fois que l'application s'affiche dans le simulateur, positionnez le simulateur en regard de la fenêtre Visual Studio afin de pouvoir afficher immédiatement les résultats de vos sélections et des modifications que vous apportez aux styles CSS.

  6. Basculez vers Visual Studio et cliquez sur 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. Le bouton Sélectionner un élément se présente comme suit : Bouton Sélection d'un élément dans l'explorateur DOM

    Conseil

    Vous pouvez également sélectionner des éléments HTML directement 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.

  7. Dans le simulateur, amenez le pointeur au-dessus du titre du premier élément dans la liste, Titre de groupe : 1, dans le panneau gauche de la page d'accueil. Le titre est mis en surbrillance, comme illustré ci-après :

    Utilisation du bouton Sélection d'un élément

    Notes

    L'émulateur Windows Phone ne prend en charge que partiellement la mise en surbrillance des éléments par pointage.

  8. Cliquez sur le titre encadré. L'explorateur DOM sélectionne automatiquement l'élément HTML correspondant, qui ressemble à ce qui suit

    <h4 class="item-title">Group Title: 1</h4>

    Lorsque vous sélectionnez l'élément H4 dans l'Explorateur DOM, les onglets de l'Explorateur DOM montrent les règles associées à l'élément H4. L'onglet Calculé est illustré ici, avec la propriété color ouverte :

    Onglet Suivre les styles dans l'explorateur DOM

    Cette vue fournit des informations utiles sur les règles associées au style color, notamment :

    • Le sélecteur CSS que nous avons modifié dans items.css, .itemspage .itemslist .item, n'est pas utilisé dans le calcul final de style (il s'affiche en texte barré). Plusieurs autres occurrences de la propriété color ne sont pas utilisées non plus.

      Conseil

      Pour les noms de sélecteur plus longs, le nom complet s'affiche dans une info-bulle.

    • La valeur CSS calculée finale, rgba(255, 255, 255, 0.87), est définie spécifiquement pour le sélecteur CSS suivant : .itemspage .itemslist .item .item-overlay .item-title, également défini dans items.css.

      Conseil

      Maintenant que nous savons où la couleur de titre est définie, nous savons également où nous pouvons la modifier.Toutefois, nous pouvons également tester des modifications dans l'Explorateur DOM sans actualiser l'application, comme illustré dans les étapes restantes.

  9. Désactivez la case à cocher pour la première occurrence du style color, qui se rapporte au sélecteur .itemspage .itemslist .item .item-overlay .item-title. Désormais, dans le simulateur, vous constatez que la couleur de tous les titres des éléments devient orange, comme nous le souhaitions, et que le sélecteur que nous avons modifié dans CSS, .itemspage .itemslist .item, n'est plus substitué (autrement dit, que le texte barré ne lui est plus appliqué). Voici l'onglet Calculé une fois la case décochée.

    Onglet Calculé après la mise à jour du style CSS

  10. Sélectionnez l'onglet Modifications.

    Utilisez l'onglet Modifications pour identifier et suivre les modifications que vous avez effectuées pendant une session de débogage. L'illustration suivante présente le sélecteur .itemspage .itemslist .item .item-overlay .item-title dans l'onglet Modifications, qui est à présent substitué.

    Onglet Modifications de l'explorateur DOM

  11. Vous pouvez également modifier manuellement des valeurs de style CSS et voir le résultat immédiat obtenu à l'aide de l'onglet Styles.

  12. Sélectionnez l'onglet Styles.

  13. Ouvrez le sélecteur de style .itemspage .itemslist .item .item-overlay .item-title.

  14. Sélectionnez la première occurrence du style color, puis double-cliquez sur la valeur de propriété rgb(255, 255, 255, 0.87).

  15. Utilisez le clavier pour modifier cette valeur. Remplacez-la par rgb(255, 255, 0, 0.87) et appuyez sur Entrée. Les couleurs des titres des éléments dans le simulateur deviennent jaunes.

  16. Pour apporter des modifications au fichier CSS source, cliquez sur le lien items.css dans l'onglet Styles. Ceci entraîne l'ouverture du fichier items.css pour vous permettre de modifier la valeur du style color dans le code de votre application. Pour actualiser l'application sans arrêter ni redémarrer le débogueur, cliquez sur le bouton Bouton d'actualisation de l'application Windows (Actualiser l'application Windows) dans la barre d'outils Déboguer.

Voir aussi

Tâches

Afficher les écouteurs d'événements DOM

Concepts

Démarrage rapide : déboguer du code HTML et CSS

Déboguer la disposition avec l'Explorateur DOM

Autres ressources

Support technique et accessibilité