Démarrage rapide : débogage d'applications (JavaScript)

Visual Studio fournit une expérience complète sur le débogage des applications de Windows Store générées pour Windows avec JavaScript qui inclut des fonctionnalités qui sont familières aux développeurs Internet Explorer et Visual Studio. Cette rubrique offre une vue d'ensemble des fonctionnalités de débogage spécifiques à ces applications avec des didacticiels qui illustrent le mode d'utilisation de ces fonctionnalités.

Lorsque vous déboguez, utilisez un modèle de débogage interactif, dans lequel vous pouvez afficher et interagir avec le code HTML, CSS et JavaScript rendu pour résoudre les problèmes. Vous pouvez également utiliser un modèle de débogage Visual Studio plus classique qui permet d'exécuter des tâches importantes comme la définition de points d'arrêt et l'exécution pas-à-pas dans le code. Vous pouvez également utiliser une combinaison des deux modèles.

Le tableau suivant répertorie les fonctionnalités de débogage qui sont disponibles pour les applications de Windows Store avec JavaScript, et fournit des liens pour consulter des informations supplémentaires.

Cette rubrique fournit également des informations sur les tâches de débogage JavaScript suivantes : Activation des exceptions de première chance et Débogage des applications qui utilisent des composants Windows Runtime.

Débogage interactif à l'aide de l'explorateur DOM

L'explorateur DOM affiche une vue de la page rendue ; utilisez l'explorateur DOM pour modifier des valeurs et affichez immédiatement les résultats. Cela permet de tester des modifications à l'aide d'un processus itératif sans arrêter, ni redémarrer le débogueur. Le code source de votre projet ne change pas lorsque vous interagissez avec la page en ayant recours à cette méthode. Ainsi, lorsque vous recherchez des corrections de code souhaitées, vous arrêtez le débogueur et modifiez votre code source.

Vous pouvez utiliser l'explorateur DOM pour effectuer les tâches suivantes :

• Examiner le code HTML, CSS et JavaScript rendu et naviguer dans la sous-arborescence des éléments DOM.

• Modifier dynamiquement les attributs des éléments rendus.

• Examiner l'application des styles CSS sur la page, puis effectuer des modifications dynamiquement.

Lorsque vous déboguez des applications, vous devez souvent sélectionner des éléments dans l'explorateur DOM. Lorsque vous sélectionnez un élément, les valeurs qui s'affichent sur les onglets à droite sont automatiquement mises à jour pour refléter l'élément sélectionné dans l'explorateur DOM. Ces onglets sont les suivants : Styles, Suivre les styles, Disposition, Attributs et Événements. Pour plus d'informations sur la sélection d'éléments, consultez Sélection d'éléments.

Dans la procédure qui suit, nous examinerons le processus de débogage interactif d'une application à l'aide de l'explorateur DOM. Nous créerons une application qui utilise un contrôle FlipView, puis nous la déboguerons. Le code de l'application contient plusieurs erreurs.

Pour utiliser le débogage interactif dans l'explorateur DOM

1. Créez une solution dans Visual Studio en cliquant sur Fichier > Nouveau projet.

2. Sélectionnez le modèle JavaScript nommé Application vide et entrez un nom pour le projet, par exemple FlipViewApp.

3. Dans l'élément BODY du fichier default.html, ajoutez le code suivant :

       <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;background-color:#0094ff" 
           data-win-control="WinJS.UI.FlipView"
               data-win-options="{ itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
       </div>
   

4. Remplacez le code dans default.js par le code suivant :

   (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.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
           pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
           pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
       };
   
       app.oncheckpoint = function (args) {
       };
   
       app.start();
   
       var publicMembers = {
           items: pages
       };
   
       WinJS.Namespace.define("Data", publicMembers);
   
   })();
   

   Notes

   Le code JavaScript précédent est encapsulé dans une fonction anonyme. Cette encapsulation suit le modèle de programmation classique utilisé dans les modèles de projet. Lorsque vous encapsulez le code de cette façon, utilisez la fonction WinJS.Namespace.define pour accéder aux éléments de code ailleurs dans l'application.

5. Sélectionnez Simulateur dans la liste déroulante située en regard du bouton Démarrer le débogage dans la barre d'outils Déboguer :

   

6. Cliquez sur Déboguer > Démarrer le débogage, ou appuyez sur F5, pour exécuter votre application en mode débogage.

   L'application est ainsi exécutée dans un simulateur, mais l'écran affiché est en grande partie vide parce que le code contient des erreurs. Une image par défaut dans la partie gauche supérieure indique qu'un chargement a été effectué. Si vous cliquez sur dans cette zone de l'écran, une flèche FlipView s'affiche indiquant que le contrôle a été instancié, mais le contrôle n'a pas la bonne taille.

   Conseil

   Appuyez sur Alt + Tab, ou F12, pour basculer entre Visual Studio et l'application en cours de exécution. Si vous exécutez l'application dans le simulateur et non sur l'ordinateur local, cliquez sur les boutons Visual Studio et Simulateur dans la barre des tâches Windows pour basculer entre les fenêtres.

7. Dans Visual Studio, cliquez sur l'onglet Explorateur DOM.

8. Dans la fenêtre de l'explorateur DOM, sélectionnez l'élément DIV de la section associé à l'ID "fView" :

   

   Conseil

   Vous pouvez également sélectionner l'élément DIV dans l'angle inférieur gauche de la fenêtre de la console JavaScript en entrant select(fView) à l'invite de commande >> et en appuyant sur Entrée.

   Notez que la largeur et la hauteur sont correctement définies en pixels dans l'explorateur DOM.

   Les valeurs qui s'affichent sur 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.

9. Sous l'onglet Attributs, double-cliquez sur l'attribut style. Modifiez la hauteur et la largeur afin que ces deux propriétés aient la valeur 100 %. Dès que vous appuyez sur Entrée, les nouvelles valeurs sont immédiatement répercutées dans le Simulateur, même si vous n'avez pas arrêté votre session de débogage.

   

   Important

   Comme vous pouvez mettre à jour les valeurs d'attribut, vous pouvez également mettre à jour les valeurs des onglets Styles, Suivre les styles et Disposition. Pour plus d'informations, consultez Comment : inspecter des règles CSS et Comment : afficher et modifier la disposition.

   Le contrôle FlipView est désormais dimensionné correctement. Il fonctionne également correctement, mais au lieu d'avoir les images prévues, vous obtenez les images par défaut, les images manquantes et les images prévues intercalées avec les images manquantes.

   Un bogue dans le code JavaScript est à l'origine de ce problème. Dans la section suivante, nous explorerons une manière de résoudre ce bogue dans la fenêtre de la console JavaScript. Pour continuer le débogage, consultez Débogage interactif à l'aide de la fenêtre de la console JavaScript

Utilisez la fonction Actualiser pour modifier le code HTML, CSS et JavaScript et pour recharger rapidement les pages sans arrêter, ni redémarrer le débogueur. Pour plus d'informations sur la fonction Actualiser, consultez Comment : actualiser une application.

Pour actualiser votre application pendant le débogage

1. Lorsque l'application est en cours d'exécution, passez dans 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 %.

3. Cliquez sur le bouton Actualiser l'application Windows dans la barre d'outils Déboguer (ou appuyez sur F4). Le bouton présente l'aspect suivant : .

   Les pages d'application sont rechargées et le simulateur s'affiche au premier plan.

   Comme précédemment, les images ne s'affichent pas correctement. Vous pouvez continuer le débogage de cette application dans la section suivante.

Débogage interactif à l'aide de la fenêtre de la console JavaScript

Vous pouvez exécuter et mettre à jour le code JavaScript dans la fenêtre de la console JavaScript. Comme l'explorateur DOM, la fenêtre de la console JavaScript permet de tester les modifications sans arrêter, ni redémarrer le débogueur. Ainsi, vous pouvez consulter immédiatement les résultats dans la page rendue. Lorsque vous découvrez la ou les modifications souhaitées, vous arrêtez le débogueur et vous appliquez ces corrections à votre code source.

Utilisez la fenêtre de la console JavaScript pour effectuer les tâches suivantes :

• Exécuter des scripts en mode ligne unique ou multiligne.

• Afficher des messages d'informations et des messages d'erreur.

• Effectuer d'autres tâches, telles que l'effacement de l'écran. Consultez Commandes de la console JavaScript pour obtenir la liste complète des commandes.

Dans cette procédure, nous continuerons de déboguer l'application FlipView que nous avons commencé à déboguer dans la section Débogage interactif à l'aide de l'explorateur DOM. Nous avons déjà noté que le contrôle FlipView fonctionne correctement, mais n'affiche pas les images attendues.

Pour déboguer le code JavaScript dans l'application FlipView

1. Avec l'application FlipView en cours d'exécution dans le simulateur, entrez Data.items dans l'invite d'entrée de la fenêtre de la console JavaScript et appuyez sur entrée.

   Un visualiseur pour l'objet items apparaît dans la fenêtre de la console. Cela indique que l'objet items a été instancié et qu'il est disponible dans le contexte de script. Dans la fenêtre de la console, cliquez sur les nœuds d'un objet pour afficher les valeurs des propriétés (ou utilisez les touches de direction). Si vous cliquez dans l'objet items._data, comme le montre l'illustration suivante, vous noterez que les références à la source de l'image sont incorrectes, comme prévu. Les images par défaut sont encore présentes dans l'objet, et certaines images manquantes sont entremêlées avec les images attendues.

   

2. À l'invite, entrez Data.items.push, puis appuyez sur Entrée. La fenêtre de la console illustre l'implémentation de la fonction de push à partir d'un fichier projet Bibliothèque Windows pour JavaScript (WinJS). Avec un examen peu approfondi avec IntelliSense, nous découvrons qu'il faut utiliser setAt pour remplacer les images par défaut.

3. Pour résoudre ce problème en mode interactif, sans arrêter la session de débogage, ouvrez default.js et sélectionnez le code suivant dans la fonction updateImages :

   pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
   pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
   pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

   Copiez et collez ce code dans l'invite d'entrée de la console JavaScript.

   Conseil

   Lorsque vous collez le code multiligne dans l'invite d'entrée de la console JavaScript, l'invite d'entrée de la console passe automatiquement en mode multiligne. Appuyez sur Ctrl + Alt + M pour activer ou désactiver le mode multiligne. Pour exécuter un script en mode multiligne, appuyez sur Ctrl + Entrée ou cliquez sur le symbole de flèche dans l'angle inférieur droit de la fenêtre.

4. Corrigez les appels de fonction push dans l'invite, en remplaçant pages.push par Data.items.setAt, puis cliquez sur le symbole de flèche pour exécuter le script. Le code corrigé doit se présenter comme suit :

   Data.items.setAt.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
   Data.items.setAt.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
   Data.items.setAt.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

5. Appuyez sur Ctrl + Alt + M pour basculer l'invite d'entrée de la console en mode ligne simple, puis appuyez sur Ctrl + A pour sélectionner l'entrée précédente pour pouvoir la supprimer.

6. Entrez Data.items.length = 3 à l'invite, puis appuyez sur Entrée. Cela supprime les éléments étrangers des données.

7. Vérifiez de nouveau le simulateur et vous verrez que les images correctes se trouvent sur les pages FlipView appropriées.

8. Dans l'explorateur DOM, vous pouvez voir l'élément DIV mis à jour, et vous pouvez naviguer dans la sous-arborescence pour rechercher les éléments IMG attendus.

9. Arrêtez le débogage en cliquant sur Déboguer > Arrêter le débogage ou en appuyant sur Maj + F5, puis corrigez le code source.

   Pour la page default.html complète contenant l'exemple de code corrigé, consultez Débogage de l'exemple de code des applications (JavaScript).

Débogage interactif et mode arrêt

Utilisez des points d'arrêt et effectuez une exécution pas-à-pas du code pendant que vous utilisez les outils de débogage JavaScript comme la fenêtre de la console JavaScript. Lorsqu'un programme en cours d'exécution dans le débogueur rencontre un point d'arrêt, le débogueur suspend provisoirement l'exécution du programme. Lorsque l'exécution est suspendue, votre programme passe du mode exécution au mode arrêt. Vous pouvez reprendre manuellement l'exécution à tout moment.

Lorsqu'un programme est en mode arrêt, vous pouvez toujours utiliser la fenêtre de la console JavaScript pour exécuter les scripts et les commandes valides dans l'état actuel de l'application. Dans cette procédure, nous utiliserons l'application FlipView que nous avons créée dans une procédure précédente pour illustrer l'utilisation du mode arrêt.

Pour définir un point d'arrêt et déboguer l'application

1. Dans le fichier default.html de l'application FlipView que vous avez créée précédemment, cliquez avec le bouton droit sur la fonction updateImages() et cliquez sur Point d'arrêt > Insérer un point d'arrêt.

2. Sélectionnez Ordinateur local dans la liste déroulante en regard du bouton Démarrer le débogage dans la barre d'outils Standard.

3. Cliquez sur Déboguer > Démarrer le débogage ou appuyez sur F5.

   L'application passe en mode arrêt lorsque l'exécution atteint la fonctionupdateImages(), et la ligne en cours du programme d'exécution est mise en surbrillance en jaune.

   

   Modifiez les valeurs des variables pour changer immédiatement l'état du programme sans mettre fin à la session de débogage en cours.

4. Entrez updateImages à l'invite d'entrée et appuyez sur Entrée. L'implémentation de la fonction s'affiche dans la fenêtre de la console.

5. Copiez une ligne de la fonction dans l'invite, puis remplacez la valeur d'index par 3 :

   pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

6. Appuyez sur entrée pour exécuter la ligne de code.

   Si vous souhaitez parcourir le code ligne par ligne, appuyez sur F11 ou sur F5 pour continuer l'exécution du programme.

7. Appuyez sur F5 pour poursuivre l'exécution du programme. L'application FlipView s'affiche, et désormais les quatre pages affichent l'une des images non définies par défaut.

   Pour revenir à Visual Studio, appuyez sur F12 ou Alt+Tab.

Mode à ligne simple et mode multiligne dans la fenêtre de la console JavaScript

L'invite d'entrée de la fenêtre de la console JavaScript prend en charge le mode à ligne simple et le mode multiligne. La procédure de débogage interactif dans cette rubrique fournit un exemple d'utilisation de ces deux modes. Appuyez sur Ctrl + Alt + M pour basculer entre les modes.

Le mode à ligne simple fournit l'historique des entrées. Naviguez dans l'historique des entrées à l'aide des touches Haut et Bas. Le mode à ligne simple efface la ligne d'invite d'entrée lorsque vous exécutez les scripts. Pour exécuter un script en mode à ligne simple, appuyez sur Entrée.

Le mode multiligne n'efface pas l'invite d'entrée lorsque vous exécutez des scripts. Lorsque vous basculez en mode à ligne simple à partir du mode multiligne, vous pouvez effacer la ligne d'entrée en appuyant sur Ctrl + A et en tapant un caractère. Pour exécuter un script en mode multiligne, appuyez sur Ctrl + Entrée ou cliquez sur le symbole de flèche dans l'angle inférieur droit de la fenêtre.

Sélection d'éléments

Vous pouvez sélectionner des éléments DOM de trois façons différentes lors du débogage d'une application :

• Cliquez sur les éléments directement dans la fenêtre de l'explorateur DOM (ou à l'aide des touches de direction).

• Utilisez le bouton Sélectionner un élément.

• Utilisez la commande select, qui est l'une des Commandes de la console JavaScript.

Lorsque 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 le simulateur ou le périphérique. 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. L'illustration suivante présente le bouton Sélectionner un élément.

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 ou le simulateur. Après un clic, le mode de sélection normale est restauré. 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. Dans ce mode, lorsque vous placez le pointeur de la souris sur les éléments dans le simulateur ou le périphérique, un contour coloré apparaît sur l'élément. Lorsque vous cliquez sur l'élément encadré, l'explorateur DOM s'affiche au premier plan avec l'élément spécifié sélectionné. Pour obtenir un exemple illustrant le mode de sélection des éléments à l'aide du bouton Sélectionner un élément, consultez Comment : inspecter des règles CSS.

Débogage des applications qui utilisent des composants Windows Runtime

Lorsque vous déboguez des applications de Windows Store avec JavaScript qui référencent des fichiers C# ou Visual Basic WinMD, ou qui incluent des composants Windows Runtime C++ (un fichier WinMD et une DLL), spécifiez le débogueur à utiliser. Vous ne pouvez pas déboguer JavaScript et le code managé ou natif simultanément.

Spécifiez le débogueur à exécuter dans la page des propriétés de débogage du projet. Pour plus d'informations, consultez Comment démarrer une session de débogage (JavaScript).

Déploiement d'applications

Dans certains scénarios de débogage pour les applications de Windows Store générées pour Windows à l'aide de JavaScript, vous devez déployer l'application sans la démarrer dans Visual Studio. Par exemple, les applications conçues pour accepter le contenu partagé peuvent être lancées à partir de l'interface utilisateur de partage, auquel cas il est nécessaire de déboguer dans l'application qui partage le contenu. Pour l'application qui reçoit le contenu partagé, affectez à la propriété Lancer l'application dans la page des propriétés de débogage du projet la valeur Non. Pour plus d'informations sur les scénarios de déploiement des applications, consultez Comment démarrer une session de débogage (JavaScript).

Activation des exceptions de première chance

À l'aide d'exceptions de première chance, indiquez qu'une application doit passer en mode arrêt lorsqu'elle rencontre une exception d'exécution. Lorsque cette fonctionnalité est activée, l'application passe en mode arrêt même lorsque les exceptions sont traitées. Cela vous permet de consulter certaines erreurs qui normalement ne seraient pas évidentes pendant le débogage. Certaines bibliothèques utilisent très souvent des exceptions, et il est préférable de désactiver les exceptions de première chance lorsque vous utilisez ces bibliothèques.

Pour activer les exceptions de première chance

1. Dans Visual Studio, cliquez sur Déboguer > Exceptions.

2. Dans la boîte de dialogue Exceptions, développez le nœud JavaScript Runtime Exceptions.

3. Activez la case à cocher Levé pour toutes les exceptions sur lesquelles le débogueur doit systématiquement s'arrêter, puis cliquez sur OK.

Navigateurs et plateformes pris en charge

Les outils Visual Studio pour JavaScript, l'explorateur DOM et la fenêtre de la console JavaScript sont pris en charge sur les plateformes suivantes :

• Applications Windows Store générées pour Windows 8 à l'aide de JavaScript

• Internet Explorer 10 s'exécutant sur Windows 8

Cliquez ici pour télécharger Windows 8 et Visual Studio.

Voir aussi

Tâches

Comment : afficher les écouteurs d'événements

Comment : actualiser une application

Référence

Troubleshooting Windows Runtime errors

How to handle errors with promises

Concepts

Débogage des applications du Windows Store

Comment : inspecter des règles CSS

Comment : afficher et modifier la disposition

Autres ressources

Support technique et accessibilité