Déboguer le code HTML et CSS dans les applications UWP dans Visual StudioDebug HTML and CSS in UWP apps in Visual Studio

Pour les applications JavaScript, Visual Studio fournit une expérience de débogage complète qui inclut des fonctionnalités familières aux développeurs Internet Explorer et Visual Studio.For JavaScript apps, Visual Studio provides a comprehensive debugging experience that includes features that are familiar to Internet Explorer and Visual Studio developers. Ces fonctionnalités sont prises en charge pour les applications UWP et pour les applications créées à l’aide de Visual Studio Tools pour Apache Cordova.These features are supported for UWP apps and for apps created using Visual Studio Tools for Apache Cordova.

Grâce au modèle de débogage interactif fourni par les outils d’inspection DOM, vous pouvez afficher et modifier le rendu du code HTML et CSS.Using the interactive debugging model provided by the DOM inspection tools, you can view and modify the rendered HTML and CSS code. Et cela, sans avoir à arrêter ni redémarrer le débogueur.You can do all this without stopping and restarting the debugger.

Pour plus d’informations sur les fonctionnalités, telles que l’utilisation de la fenêtre de JavaScript Console et la définition de points d’arrêt, le débogage de JavaScript, consultez démarrage rapide : débogage de JavaScript et déboguer des applications dans Visual Studio.For info on other JavaScript debugging features, such as using the JavaScript Console window and setting breakpoints, see QuickStart: Debug JavaScript and Debug apps in Visual Studio.

Examen du modèle DOM en directInspecting the live DOM

L’explorateur DOM affiche une vue de la page rendue ; utilisez l’explorateur DOM pour modifier des valeurs et afficher immédiatement les résultats.DOM Explorer shows you a view of the rendered page, and you can use DOM Explorer to change values and immediately see the results. Cela vous permet de tester les modifications sans arrêter et redémarrer le débogueur.This enables you to test changes without stopping and restarting the debugger. Le code source de votre projet ne change pas quand vous interagissez avec la page à l’aide de cette méthode. Ainsi, quand vous trouvez les corrections de code souhaitées, vous modifiez votre code source.The source code in your project doesn't change when you interact with the page by using this method, so when you find the desired code corrections, you make the changes to your source code.

Conseil

Pour éviter d’avoir à arrêter et redémarrer le débogueur quand vous modifiez votre code source, vous pouvez actualiser votre application à l’aide du bouton Actualiser l’application Windows dans la barre d’outils Déboguer (ou en appuyant sur F4).To avoid stopping and restarting the debugger when you make changes to your source code, you can refresh your app by using the Refresh Windows app button on the Debug toolbar (or by pressing F4). Pour plus d’informations, consultez actualiser une application (JavaScript).For more info, see Refresh an app (JavaScript).

Vous pouvez utiliser l’explorateur DOM pour effectuer les tâches suivantes :You can use DOM Explorer to:

  • Parcourir la sous-arborescence des éléments DOM et inspecter le rendu du code HTML, CSS et JavaScript.Navigate the DOM element subtree and inspect rendered HTML, CSS, and JavaScript code.

  • Modifier de manière dynamique les attributs et les styles CSS pour les éléments rendus et afficher immédiatement les résultats.Dynamically edit attributes and CSS styles for rendered elements and immediately see the results.

  • Inspecter la façon dont les styles CSS ont été appliqués aux éléments de page et effectuer un suivi des règles qui ont été appliquées.Inspect how CSS styles have been applied to page elements, and trace the rules that have been applied.

    Lorsque vous déboguez des applications, vous devez souvent sélectionner des éléments dans l’explorateur DOM.When debugging apps, you often need to select elements in DOM Explorer. Quand vous sélectionnez un élément, les valeurs qui s’affichent sous les onglets dans la partie droite de l’explorateur DOM sont automatiquement mises à jour pour refléter l’élément sélectionné dans l’explorateur DOM.When you select an element, the values that appear on the tabs on the right side of the DOM Explorer automatically update to reflect the selected element in DOM Explorer. Ces onglets sont les suivants : Styles, Calculé, Disposition.These are the tabs: Styles, Computed, Layout. Les applications UWP prennent également en charge la événements et modifications onglets.UWP apps also support the Events and Changes tabs. Pour plus d’informations sur la sélection des éléments, consultez Selecting elements.For more info about selecting elements, see Selecting elements.

Conseil

Si la fenêtre de l’explorateur DOM est fermée, sélectionnez Déboguer>Fenêtres > Explorateur DOM pour la rouvrir.If the DOM Explorer window is closed, choose Debug>Windows > DOM Explorer to re-open it. La fenêtre s’ouvre uniquement pendant une session de débogage de script.The window only appears during a script debugging session.

Dans la procédure qui suit, nous examinerons le processus de débogage interactif d’une application à l’aide de l’explorateur DOM.In the procedure that follows, we'll go through the process of interactively debugging an app by using DOM Explorer. Nous créerons une application qui utilise un contrôle FlipView , puis nous la déboguerons.We'll create an app that uses a FlipView control and then debug it. L’application contient plusieurs erreurs.The app contains several errors.

Avertissement

L’exemple d’application suivant est une application UWP.The following sample app is a UWP app. Les mêmes fonctionnalités sont prises en charge par Cordova, mais l’application serait différente.The same features are supported for Cordova, but the app would be different.

Pour déboguer en examinant le modèle DOM en directTo debug by inspecting the live DOM

  1. Créez une solution dans Visual Studio en sélectionnant Fichier > Nouveau projet.Create a new solution in Visual Studio by choosing File > New Project.

  2. Choisissez JavaScript > Windows universel, puis choisissez WinJS application.Choose JavaScript > Windows Universal, and then choose WinJS App.

  3. Attribuez un nom au projet, tel que FlipViewApp, puis choisissez OK pour créer l’application.Type a name for the project, such as FlipViewApp, and choose OK to create the app.

  4. Dans l’élément BODY de index.html, ajoutez ce code :In the BODY element of index.html, add this code:

    <div id="flipTemplate" data-win-control="WinJS.Binding.Template"  
             style="display:none">  
        <div class="fixedItem" >  
            <img src="#" data-win-bind="src: flipImg" />  
        </div>  
    </div>  
    <div id="fView" style="width:100px;height:100px"  
        data-win-control="WinJS.UI.FlipView" data-win-options="{  
        itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">  
    </div>  
    
  5. Ouvrez default.css et ajoutez le CSS suivant :Open default.css, and add the following CSS:

    #fView {  
        background-color:#0094ff;  
        height: 100%;  
        width: 100%;  
        margin: 25%;  
    }  
    
  6. Remplacez le code dans default.js par le code suivant :Replace the code in default.js with this code:

    (function () {  
        "use strict";  
    
        var app = WinJS.Application;  
        var activation = Windows.ApplicationModel.Activation;  
    
        var myData = [];  
        for (var x = 0; x < 4; x++) {  
            myData[x] = { flipImg: "/images/logo.png" }  
        };  
    
        var pages = new WinJS.Binding.List(myData, { proxy: true });  
    
        app.onactivated = function (args) {  
            if (args.detail.kind === activation.ActivationKind.launch) {  
                if (args.detail.previousExecutionState !==  
                activation.ApplicationExecutionState.terminated) {  
                    // TODO: . . .  
                } else {  
                    // TODO: . . .  
                }  
                args.setPromise(WinJS.UI.processAll());  
    
                updateImages();  
            }  
        };  
    
        function updateImages() {  
    
            pages.setAt(0, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg" });  
            pages.setAt(1, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-77.jpg" });  
            pages.setAt(2, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-78.jpg" });  
        };  
    
        app.oncheckpoint = function (args) {  
        };  
    
        app.start();  
    
        var publicMembers = {  
            items: pages  
        };  
    
        WinJS.Namespace.define("Data", publicMembers);  
    
    })();  
    

    L’illustration suivante montre le résultat voir si cette application est exécutée.The following illustration shows what we want to see if we run this app. Toutefois, avant de parvenir à ce résultat, il nous faudra corriger un certain nombre de bogues.However, to get the app into this state we will have to fix a number of bugs first.

    Application FlipView affichant les résultats attendusFlipView app showing expected results

  7. Choisissez ordinateur Local à partir de la liste déroulante liste en regard du démarrer le débogage bouton sur le déboguer barre d’outils :Choose Local Machine from the drop-down list next to the Start Debugging button on the Debug toolbar:

    Liste cible de débogage sélectionnezSelect debug target list

  8. Choisissez Déboguer > Démarrer le débogage, ou appuyez sur F5, pour exécuter votre application en mode débogage.Choose Debug > Start Debugging, or press F5, to run your app in debug mode.

    Cette commande exécute l’application, mais que vous voyez un écran en grande partie vide parce que le style contient quelques bogues qu’elle contient.This runs the app, but you'll see a mostly blank screen because the styling has a few bugs in it. La première image FlipView apparaît dans un petit carré non loin du milieu de l’écran.The first FlipView image appears in a small square near the middle of the screen.

  9. Basculez vers Visual Studio et sélectionnez l’onglet Explorateur DOM .Switch to Visual Studio and choose the DOM Explorer tab.

    Conseil

    Appuyez sur Alt+Tab, ou F12, pour basculer entre Visual Studio et l’application en cours d’exécution.You can press Alt+Tab or F12 to switch between Visual Studio and the running app.

  10. Dans la fenêtre de l’explorateur DOM, sélectionnez l’élément DIV de la section associée à l’ID "fView".In the DOM Explorer window, select the DIV element for the section that has an ID of "fView". Utilisez les touches de direction pour afficher et sélectionner l’élément DIV approprié.Use the arrow keys to view and select the correct DIV element. (La touche de direction droite permet d’afficher les enfants d’un élément.)(The right arrow key allows you to view an element's children.)

    L’Explorateur DOMDOM Explorer

    Conseil

    Vous pouvez également sélectionner l’élément DIV dans l’angle inférieur gauche de la fenêtre de JavaScript Console en tapant select(fView) à la >> d’entrée invite et appuyez sur ENTRÉE.You can also select the DIV element in the lower left corner of the JavaScript Console window by typing select(fView) at the >> input prompt and then pressing Enter.

    Les valeurs qui s’affichent sous les onglets à droite de la fenêtre de l’explorateur DOM sont automatiquement mises à jour pour refléter l’élément en cours dans l’explorateur DOM.The values that appear on the tabs on the right side of the DOM Explorer window automatically update to reflect the current element in DOM Explorer.

  11. Sélectionnez l’onglet Calculé sur la droite.Choose the Computed tab on the right.

    Cet onglet affiche la valeur calculée ou finale de chaque propriété de l’élément DOM sélectionné.This tab shows the computed, or final, value for each property of the selected DOM element.

  12. Ouvrez la règle CSS de hauteur.Open the height CSS rule. Notez qu’il existe un style intraligne défini sur 100px, qui est incohérent avec la valeur de hauteur de 100 % définie pour le #fView sélecteur CSS.Notice that there's an inline style set to 100px, which appears inconsistent with the height value of 100% set for the #fView CSS selector. Le texte barré sur sélecteur #fView indique que le style intraligne est prioritaire sur ce style.Strikethrough text for the #fView selector indicates that the inline style is taking precedence over this style.

    L’illustration suivante montre l’onglet Calculé .The following illustration shows the Computed tab.

    Onglet calculé de l’Explorateur DOMDOM Explorer Computed tab

  13. Dans la fenêtre principale de l’explorateur DOM, double-cliquez sur le style intraligne pour la hauteur et la largeur de l’élément DIV fView .In the main DOM Explorer window, double-click the inline style for the height and width of the fView DIV element. Vous pouvez maintenant modifier les valeurs ici.You can now edit the values here. Dans ce scénario, il est convenu de les supprimer complètement.In this scenario, we want to remove them completely.

  14. Dans la fenêtre principale, double-cliquez sur width: 100px;height: 100px;, appuyez sur la supprimer et appuyez ensuite sur entrée.In the main window, double-click width: 100px;height: 100px;, press the Delete key, and then press Enter. Une fois que vous appuyez sur entrée, les nouvelles valeurs sont immédiatement répercutées dans l’application, même si vous n’avez pas arrêté votre session de débogage.After you press Enter, the new values are immediately reflected in the app, although you haven't stopped your debugging session.

    Important

    Comme vous pouvez mettre à jour les attributs dans la fenêtre de l’explorateur DOM, vous pouvez également mettre à jour les valeurs affichées sous les onglets Styles, Calculéet Disposition .As you can update attributes in the DOM Explorer window, you can also update values that appear on the Styles, Computed, and Layout tabs. Pour plus d’informations, consultez les styles CSS de déboguer à l’aide de l’Explorateur DOM et disposition pour le débogage à l’aide de l’Explorateur DOM.For more info, see Debug CSS styles using DOM Explorer and Debug layout using DOM Explorer.

  15. Basculez vers l’application en sélectionnant ou en utilisant les touches Alt + Tab.Switch to the app by selecting it or by using Alt+Tab.

    À présent, le contrôle FlipView est plus grand que la taille de l’écran du simulateur ou de l’émulateur Windows Phone.Now the FlipView control appears larger than the Simulator's or the Phone Emulator's screen size. Ce n’est pas le résultat souhaité.This is not the intended result. Pour faire une recherche, revenez à Visual Studio.To investigate, switch back to Visual Studio.

  16. Dans l’explorateur DOM, sélectionnez à nouveau l’onglet Calculé et ouvrez la règle de hauteur.In the DOM Explorer, select the Computed tab again and open the height rule. L’élément fView affiche toujours une valeur de 100 %, comme prévu par le CSS, mais la valeur calculée est égale à la hauteur de l’écran de l’application (par exemple, 800px, 667.67px, ou une autre valeur), qui n’est pas le résultat escompté pour cette application.The fView element still shows a value of 100%, as expected from the CSS, but the computed value is equal to the app's screen height (for example, 800px, 667.67px, or some other value), which is not what we want for this app. Pour rechercher dans les étapes suivantes, nous supprimer la hauteur et la largeur de la fView élément DIV.To investigate, in the next steps we remove the height and width for the fView DIV element.

  17. Sous l’onglet Styles , désactivez les propriétés de hauteur et de largeur du sélecteur CSS #fView .In the Styles tab, uncheck the height and width properties for the #fView CSS selector.

    L’onglet Calculé affiche maintenant une hauteur de 400px.The Computed tab now shows a height of 400px. Les informations indiquent que cette valeur provient du sélecteur .win-flipview spécifié dans ui-dark.css, qui est un fichier CSS de plateforme.The information indicates that this value comes from the .win-flipview selector specified in ui-dark.css, which is a platform CSS file.

  18. Rebasculez vers l’application.Switch back to the app.

    Les choses se sont améliorées.Things have improved. Toutefois, il reste un problème de plus à corriger : les marges sont trop grandes.However, there is still one more problem to fix: the margins appear too large.

  19. Pour lancer une analyse, basculez vers Visual Studio et choisissez la disposition onglet d’examiner le modèle de boîte de l’élément.To investigate, switch to Visual Studio and choose the Layout tab to look at the element's box model.

    Dans le disposition onglet, vous verrez les éléments suivants :In the Layout tab, you'll see the following:

    • 255px (décalage) et 255px (marge) ou des valeurs similaires, en fonction de la résolution de votre appareil.255px (Offset) and 255px (Margin) or similar values, depending on your device resolution.

      L’illustration suivante montre comment la disposition onglet recherche si vous utilisez un émulateur avec 100px décalage et marge).The following illustration shows how the Layout tab looks if you're using an emulator with 100px offset and margin).

      Onglet Disposition de l’Explorateur DOMDOM Explorer Layout tab

      Cela ne semble pas correct.This doesn't seem right. L’onglet Calculé indique aussi des valeurs de marge identiques.The Computed tab also shows the same margin values.

  20. Sélectionnez l’onglet Styles , et recherchez le sélecteur CSS #fView .Choose the Styles tab and locate the #fView CSS selector. Vous voyez ici une valeur de 25 % pour la propriété marge .Here, you see a value of 25% for the margin property.

  21. Sélectionnez 25 %, remplacez-le par 25px, puis appuyez sur Entrée.Select the 25% and change it to 25px, and press Enter.

  22. Toujours sous l’onglet Styles , sélectionnez la règle de hauteur pour le sélecteur .win-flipview, remplacez 400 px par 500 px, puis appuyez sur Entrée.Also in the Styles tab, choose the height rule for the .win-flipview selector and change 400px to 500px, and press Enter.

  23. Rebasculez vers l’application. Vous constatez que le positionnement des éléments semble correct.Switch back to the app and you see that the placement of elements appears correct. Pour créer des correctifs de la source et actualiser l’application sans arrêter et redémarrer le débogueur, consultez la procédure suivante.To make fixes to the source and refresh the app without stopping and restarting the debugger, see the following procedure.

Pour actualiser votre application pendant le débogageTo refresh your app while debugging

  1. Quand l’application est en cours d’exécution, passez dans Visual Studio.While the app is still running, switch to Visual Studio.

  2. Ouvrez le fichier default.html et modifiez votre code source en définissant la hauteur et la largeur de l’élément DIV "fView" sur la valeur 100 %.Open default.html and modify your source code by changing the height and width of the "fView" DIV element to 100%.

  3. Sélectionnez le bouton Actualiser l’application Windows dans la barre d’outils Déboguer (ou appuyez sur F4).Choose the Refresh Windows app button on the Debug toolbar (or press F4). Le bouton ressemble à ceci : bouton d’application Windows d’actualiser.The button looks like this: Refresh Windows app button.

    Les pages d’application sont rechargées et le simulateur ou l’émulateur Windows Phone s’affiche au premier plan.The app pages reload and the Simulator or Phone Emulator returns to the foreground.

    Pour plus d’informations sur la fonctionnalité d’actualisation, consultez actualiser une application (JavaScript).For more info about the Refresh feature, see Refresh an app (JavaScript).

Selecting elementsSelecting elements

Il existe trois façons de sélectionner des éléments DOM lors du débogage d’une application :You can select DOM elements in three ways when debugging an app:

  • Cliquez sur les éléments directement dans la fenêtre de l’explorateur DOM (ou utilisez les touches de direction).By clicking on elements directly in the DOM Explorer window (or by using the arrow keys).

  • Utilisez le bouton Sélectionner un élément (Ctrl+B).By using the Select Element button (Ctrl+B).

  • Utilisez le bouton select , qui est l’une des JavaScript Console commands.By using the select command, which is one of the JavaScript Console commands.

    Quand vous utilisez la fenêtre de l’explorateur DOM pour sélectionner des éléments et placez le pointeur de la souris sur un élément, l’élément correspondant est mis en surbrillance dans l’application en cours d’exécution.When you use the DOM Explorer window to select elements, and rest the mouse pointer on an element, the corresponding element is highlighted in the running app. Vous devez cliquer sur l’élément dans l’explorateur DOM pour le sélectionner, ou vous pouvez utiliser les touches de direction pour mettre en surbrillance et sélectionner des éléments. Vous pouvez également sélectionner des éléments dans l’explorateur DOM à l’aide du bouton Sélectionner un élément .You must click on the element in DOM Explorer to select it, or you can use the arrow keys to highlight and select elements.You can also select elements in DOM Explorer by using the Select element button. L’illustration suivante présente le bouton Sélectionner un élément .The following illustration shows the Select Element button.

    Sélectionnez le bouton de l’élément dans l’Explorateur DOMSelect Element Button in DOM Explorer

    Lorsque vous cliquez sur Sélectionner un élément (ou appuyez sur Ctrl+B), le mode de sélection est modifié pour vous permettre de sélectionner un élément dans l’explorateur DOM en cliquant dessus dans l’application en cours d’exécution.When you click Select element (or press Ctrl+B), this changes the selection mode so that you can select an item in DOM Explorer by clicking it in the running app. Après un clic, le mode de sélection normale est restauré.The mode changes back to normal selection mode after a single click. Lorsque vous cliquez sur Sélectionner un élément, l’application s’affiche au premier plan et le curseur change pour refléter le nouveau mode de sélection.When you click Select element, the app comes to the foreground and the cursor changes to reflect the new selection mode. Quand vous cliquez sur l’élément encadré, l’explorateur DOM s’affiche au premier plan avec l’élément spécifié sélectionné.When you click the outlined element, DOM Explorer returns to the foreground with the specified element selected.

    Avant de choisir Sélectionner un élément, spécifiez si les éléments doivent être mis en surbrillance dans l’application en cours d’exécution en activant le bouton Afficher les zones de surlignement de la page web pour l’élément sélectionné dans l’arborescence DOM .Before you choose Select Element, you can specify whether to highlight elements in the running app by toggling the Display web page highlights button. Voici une illustration de ce bouton.The following illustration shows this button. Les zones de surlignement sont affichées par défaut.Highlights are displayed by default.

    Page d’affichage web met en surbrillance le boutonDisplay web page highlights button

    Quand vous choisissez de mettre en surbrillance des éléments, les éléments pointés dans le simulateur sont mis en surbrillance.When you choose to highlight elements, elements that you hover over in the Simulator are highlighted. Les couleurs des éléments mis en surbrillance correspondent au modèle de boîte qui apparaît sous l’onglet Disposition de l’explorateur DOM.Colors for highlighted elements match the box model that appears in the Layout tab of DOM Explorer.

Note

La mise en surbrillance d’éléments par pointage n’est que partiellement prise en charge dans l’émulateur Windows Phone.Highlighting elements by hovering over them is only partially supported in the Windows Phone Emulator.

Voir aussiSee Also

Debug apps in Visual Studio Debug apps in Visual Studio
Actualiser une application (JavaScript) Refresh an app (JavaScript)
Déboguer un contrôle WebView Debug a WebView control
Raccourcis clavier Keyboard shortcuts
Commandes de JavaScript Console JavaScript Console commands
Déboguer les exemples de code HTML, CSS et JavaScript Debug HTML, CSS, and JavaScript sample code
Support technique et accessibilitéProduct Support and Accessibility