Déboguer du code JavaScript à l’aide de la console dans Visual StudioDebug JavaScript using the console in Visual Studio

Vous pouvez utiliser la fenêtre de JavaScript Console pour interagir avec et déboguer des applications UWP générées à l’aide de JavaScript.You can use the JavaScript Console window to interact with and debug UWP apps built using JavaScript. Ces fonctionnalités sont prises en charge pour les applications UWP et les applications créées à l’aide de Visual Studio Tools pour Apache Cordova.These features are supported for UWP apps and apps created using Visual Studio Tools for Apache Cordova. Pour obtenir la référence des commandes de la console, voir JavaScript Console commands.For the console command reference, see JavaScript Console commands.

La fenêtre de la console JavaScript permet les actions suivantes :The JavaScript Console window allows you to:

  • Envoyer des objets, valeurs et messages depuis votre application vers la fenêtre de la console.Send objects, values, and messages from your app to the console window.

  • Afficher et modifier les valeurs des variables locales ou globales de l’application en cours d’exécution.View and modify the values of local and global variables in the running app.

  • Afficher les visualiseurs d’objets.View object visualizers.

  • Exécuter le code JavaScript qui s’exécute au sein du contexte de script actif.Run JavaScript code that executes within the current script context.

  • Afficher les erreurs et les exceptions JavaScript, en plus des exceptions du modèle DOM et Windows Runtime.View JavaScript errors and exceptions, in addition to Document Object Model (DOM) and Windows Runtime exceptions.

  • Effectuer d’autres tâches, telles que l’effacement de l’écran.Perform other tasks, like clearing the screen. Consultez JavaScript Console commands pour obtenir la liste complète des commandes.See JavaScript Console commands for the full list of commands.

Tip

Si la fenêtre de JavaScript Console est fermée, sélectionnez déboguer> Windows > JavaScript Console ouvrir à nouveau.If the JavaScript Console window is closed, choose Debug> Windows > JavaScript Console to re-open it. La fenêtre s’ouvre uniquement pendant une session de débogage de script.The window appears only during a script debugging session.

À l’aide de la fenêtre de la console JavaScript, vous pouvez interagir avec votre application sans interrompre et redémarrer le débogueur.Using the JavaScript Console window, you can interact with your app without stopping and restarting the debugger. Pour plus d’informations, consultez actualiser une application (JavaScript).For more info, see Refresh an app (JavaScript). Pour plus d’informations sur les fonctionnalités, comme à l’aide de l’Explorateur DOM et la définition des points d’arrêt, de débogage de JavaScript, consultez Guide de démarrage rapide : déboguer du code HTML et CSS et déboguer des applications dans Visual Studio.For info on other JavaScript debugging features, such as using the DOM Explorer and setting breakpoints, see Quickstart: Debug HTML and CSS and Debug apps in Visual Studio.

Débogage à l’aide de la fenêtre de la console JavaScriptDebug by using the JavaScript Console window

La procédure suivante crée une application FlipView et montre comment déboguer interactivement une erreur de codage JavaScript.The following steps create a FlipView app and show how to interactively debug a JavaScript coding error.

Note

L’exemple d’application ici est une application UWP.The sample app here is a UWP app. Toutefois, les fonctionnalités de la console décrites ici s’appliquent également aux applications créées à l’aide de Visual Studio Tools pour Apache Cordova.However, the console features described here also apply to apps created using Visual Studio Tools for Apache Cordova.

Pour déboguer le code JavaScript dans l’application FlipViewTo debug JavaScript code in the FlipView app

  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, remplacez le code HTML existant par ce code :In the BODY element of index.html, replace the existing HTML code with 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" data-win-control="WinJS.UI.FlipView" data-win-options="{  
        itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">  
    </div>  
    
  5. Ouvrez default.css et ajoutez le code CSS du sélecteur #fView :Open default.css and add the CSS for the #fView selector:

    #fView {  
        background-color:#0094ff;  
        height: 500px;  
        margin: 25px;  
    }  
    
  6. Ouvrez default.js et remplacez le code par le code JavaScript suivant :Open default.js and replace the code with the following JavaScript 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.push(0, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg" });  
            pages.push(1, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-77.jpg" });  
            pages.push(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);  
    
    })();  
    
  7. Si une cible de débogage n’est pas déjà sélectionnée, choisissez ordinateur Local à partir de la liste déroulante liste en regard du appareil bouton sur le déboguer barre d’outils :If a debugging target isn't already selected, choose Local Machine from the drop-down list next to the Device button on the Debug toolbar:

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

  8. Appuyez sur F5 pour démarrer le débogueur.Press F5 to start the debugger.

    L’application fonctionne mais les images sont absentes.The app runs but images are missing. Les erreurs APPHOST dans la fenêtre de console JavaScript indiquent que les images sont absentes.APPHOST errors in the JavaScript Console window indicate that images are missing.

  9. Avec le FlipView application en cours d’exécution, le type Data.items dans l’invite d’entrée de la fenêtre de console (à côté du « >> » symbole) et appuyez sur ENTRÉE.With the FlipView app running, type Data.items in the console window input prompt (next to the ">>" symbol) and press Enter.

    Un visualiseur pour l’objet items apparaît dans la fenêtre de la console.A visualizer for the items object appears in the console window. Cela indique que l’objet items a été instancié et qu’il est disponible dans le contexte de script actif.This indicates that the items object instantiated and is available in the current script context. 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).In the console window, you can click through the nodes of an object to view property values (or use the arrow keys). Si vous cliquez sur l’objet items._data , comme le montre l’illustration suivante, vous pouvez noter que les références à la source de l’image sont incorrectes, comme prévu.If you click down into the items._data object, as you see in this illustration, you'll find that its image source references are incorrect, as expected. Les images par défaut (logo.png) sont encore présentes dans l’objet, et des images manquantes sont intercalées avec des images attendues.The default images (logo.png) are still present in the object, and there are missing images interspersed with the expected images.

    Fenêtre de JavaScript ConsoleJavaScript Console window

    Remarquez aussi que l’objet items._data comporte bien plus d’éléments que vous ne pouviez le prévoir.Also note that there are many more items in items._data object than you would expect.

  10. À l’invite, tapez Data.items.push et appuyez sur Entrée.At the prompt, type Data.items.push and press Enter. La fenêtre de console affiche un visualiseur pour la fonction push , implémentée dans un fichier projet Bibliothèque Windows pour JavaScript (WinJS)Windows Library for JavaScript (WinJS) .The console window shows a visualizer for the push function, which is implemented in a Bibliothèque Windows pour JavaScript (WinJS)Windows Library for JavaScript (WinJS) project file. Dans cette application, nous utilisons push pour ajouter les éléments corrects.In this app, we are using push to add the correct items. Avec un examen peu approfondi avec IntelliSense, nous découvrons qu’il faut utiliser setAt pour remplacer les images par défaut.With a little investigation using IntelliSense, we find out that we should be using setAt to replace the default images.

  11. 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 :To fix this problem interactively without stopping the debugging session, open default.js and select this code from the updateImages function:

    pages.push(0, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg" });  
    pages.push(1, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-77.jpg" });  
    pages.push(2, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-78.jpg" });  
    

    Copiez et collez ce code dans l’invite d’entrée de la console JavaScript.Copy and paste this code into the JavaScript Console input prompt.

    Tip

    Lorsque vous collez plusieurs lignes de code dans l’invite d’entrée de la console JavaScript, l’invite passe automatiquement en mode multiligne.When you paste multiple lines of code into the JavaScript Console input prompt, the console input prompt automatically switches to multiline mode. Appuyez sur Ctrl+Alt+M pour activer ou désactiver le mode multiligne.You can press Ctrl+Alt+M to turn multiline mode on and off. Pour exécuter un script en mode multiligne, appuyez sur Ctrl+Entrée ou sélectionnez le symbole représentant une flèche dans l’angle inférieur droit de la fenêtre.To run a script in multiline mode, press Ctrl+Enter or choose the arrow symbol in the lower-right corner of the window. Pour plus d’informations, consultez Mode à ligne simple et mode multiligne dans la fenêtre de la console JavaScript.For more info, see Single-line mode and multiline mode in the JavaScript Console window.

  12. Corrigez les appels de fonction push dans l’invite en remplaçant pages.push par Data.items.setAt.Correct the push function calls in the prompt, replacing pages.push with Data.items.setAt. Le code corrigé doit se présenter comme suit :The corrected code should look like this:

    Data.items.setAt(0, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg" });  
    Data.items.setAt(1, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-77.jpg" });  
    Data.items.setAt(2, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-78.jpg" });  
    

    Tip

    Si vous voulez utiliser l’objet pages à la place de Data.items, vous devez définir un point d’arrêt dans votre code pour conserver l’objet pages dans la portée.If you want to use the pages object instead of Data.items, you would need to set a breakpoint in your code to keep the pages object in scope.

  13. Pour exécuter le script, sélectionnez la flèche verte.Choose the green arrow symbol to run the script.

  14. Appuyez sur Ctrl + Alt + M pour passer l’invite d’entrée de la console au mode à ligne simple, puis sélectionnez effacer l’entrée (le « X » rouge) pour supprimer le code à partir de l’invite d’entrée.Press Ctrl+Alt+M to switch the console input prompt to single-line mode, and then choose Clear input (the red "X") to delete the code from the input prompt.

  15. Tapez Data.items.length = 3 à l’invite et appuyez sur Entrée.Type Data.items.length = 3 at the prompt, and then press Enter. Cela supprime les éléments étrangers des données.This removes the extraneous elements from the data.

  16. Vérifiez de nouveau l’application, et vous verrez que les images correctes se trouvent sur le bon FlipView pages.Check the app again, and you'll see that the correct images are on the correct FlipView pages.

  17. Dans l’explorateur DOM, vous pouvez voir l’élément DIV mis à jour et naviguer dans la sous-arborescence pour rechercher les éléments IMG attendus.In DOM Explorer, you can see the updated DIV element, and you can navigate into the subtree to find the expected IMG elements.

  18. Arrêtez le débogage en sélectionnant Déboguer > Arrêter le débogage ou en appuyant sur Maj+F5, puis corrigez le code source.Stop debugging by choosing Debug > Stop Debugging or by pressing Shift+F5, and then fix the source code.

    Pour la page default.html complète contenant, exemple de code corrigé, consultez déboguer du code HTML, CSS et JavaScript exemple de code.For the complete default.html page containing corrected sample code, see Debug HTML, CSS, and JavaScript sample code.

Débogage interactif et mode arrêtInteractive debugging and break mode

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.You can use breakpoints and step into code while you're using JavaScript debugging tools like the JavaScript Console window. 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.When a program that's running in the debugger encounters a breakpoint, the debugger temporarily suspends execution of the program. Lorsque l’exécution est suspendue, votre programme passe du mode exécution au mode arrêt.When execution is suspended, your program switches from run mode to break mode. Vous pouvez reprendre manuellement l’exécution à tout moment.You can resume execution at any time.

Lorsqu’un programme est en mode arrêt, vous pouvez utiliser la fenêtre de la console JavaScript pour exécuter les scripts et les commandes valides dans le contexte actif d’exécution du script.When a program is in break mode, you can use the JavaScript Console window to run scripts and commands that are valid in the current script execution context. Dans cette procédure, nous utiliserons la version corrigée de l’application FlipView que vous avez créée précédemment pour illustrer l’utilisation du mode arrêt.In this procedure, you'll use the fixed version of the FlipView app that you created earlier to demonstrate the use of break mode.

Pour définir un point d’arrêt et déboguer l’applicationTo set a breakpoint and debug the app

  1. Dans le fichier default.html de l’application FlipView que vous avez créée précédemment, ouvrez le menu contextuel de la fonction updateImages() et sélectionnez Point d’arrêt > Insérer un point d’arrêt.In the default.html file of the FlipView app that you previously created, open the shortcut menu for the updateImages() function, and then choose Breakpoint > Insert Breakpoint.

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

  3. Sélectionnez Déboguer > Démarrer le débogageou appuyez sur F5.Choose Debug > Start Debugging, or press F5.

    L’application passe en mode arrêt lorsque l’exécution atteint la fonction updateImages() , et la ligne en cours du programme d’exécution est mise en surbrillance en jaune.The app enters break mode when execution reaches the updateImages() function, and the current line of program execution is highlighted in yellow.

    Utilisation du mode arrêt avec la JavaScript ConsoleUsing break mode with the JavaScript Console

    Modifiez les valeurs des variables pour changer immédiatement l’état du programme sans mettre fin à la session de débogage en cours.You can change the values of variables to immediately affect the program state without ending the current debugging session.

  4. Tapez updateImages à l’invite et appuyez sur Entrée.Type updateImages at the prompt and press Enter. Un visualiseur pour la fonction apparaît dans la fenêtre de la console.A visualizer for the function appears in the console window.

  5. Sélectionnez la fonction dans la fenêtre de la console pour afficher l’implémentation de la fonction.Select the function in the console window to show the function implementation.

    L’illustration suivante présente la fenêtre de la console à ce stade.The following illustration shows the console window at this point.

    Fenêtre de Console JavaScript affichant un visualiseurJavaScript Console Window showing a visualizer

  6. Copiez une ligne de la fonction depuis la fenêtre de sortie dans l’invite d’entrée, puis remplacez la valeur d’index par 3 :Copy one line of the function from the output window to the input prompt, and change the index value to 3:

    pages.setAt(3, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg" });  
    
  7. Appuyez sur Entrée pour exécuter la ligne de code.Press Enter to run the line of code.

    Si vous souhaitez parcourir le code ligne par ligne, appuyez sur F11 ou sur F5 pour continuer l’exécution du programme.If you want to step through the code line by line, press F11, or press F5 to continue program execution.

  8. Appuyez sur F5 pour poursuivre l’exécution du programme.Press F5 to continue program execution. L’application FlipView s’affiche, et désormais les quatre pages affichent l’une des images non définies par défaut.The FlipView app appears, and now all four pages show one of the non-default images.

    Pour revenir à Visual Studio, appuyez sur F12 ou Alt+Tab.To switch back to Visual Studio, press F12 or Alt+Tab.

Mode à ligne simple et mode multiligne dans la fenêtre de la console JavaScriptSingle-line mode and multiline mode in the JavaScript Console window

L’invite d’entrée de la fenêtre de la console JavaScript prend en charge le mode à ligne simple et le mode multiligne.The input prompt for the JavaScript Console window supports both single-line mode and multiline mode. La procédure de débogage interactif de cette rubrique fournit un exemple d’utilisation de ces deux modes.The interactive debugging procedure in this topic provides an example of using both modes. Appuyez sur Ctrl+Alt+M pour basculer entre les modes.You can press Ctrl+Alt+M to switch between modes.

Le mode à ligne simple fournit l’historique des entrées.Single-line mode provides input history. Naviguez dans l’historique des entrées à l’aide des touches Haut et Bas.You can navigate through the input history by using the Up Arrow and Down Arrow keys. Le mode à ligne simple efface la ligne d’invite d’entrée lorsque vous exécutez les scripts.Single-line mode clears the input prompt when you run scripts. Pour exécuter un script en mode à ligne simple, appuyez sur Entrée.To run a script in single-line mode, press Enter.

Le mode multiligne n’efface pas l’invite d’entrée lorsque vous exécutez des scripts.Multiline mode does not clear the input prompt when you run scripts. Lorsque vous basculez en mode à ligne simple du mode multiligne, vous pouvez effacer la ligne d’entrée en appuyant sur effacer l’entrée (« X » rouge).When you switch to single-line mode from multiline mode, you can clear the input line by pressing Clear input (the red "X"). Pour exécuter un script en mode multiligne, appuyez sur Ctrl+Entrée ou sélectionnez le symbole représentant une flèche dans l’angle inférieur droit de la fenêtre.To run a script in multiline mode, press Ctrl+Enter or choose the arrow symbol in the lower-right corner of the window.

Basculement du contexte d’exécution du scriptSwitching the script execution context

La fenêtre de la console JavaScript vous permet d’interagir avec un seul contexte d’exécution, lequel représente une seule instance de l’hôte de la plateforme web (WWAHost.exe), à la fois.The JavaScript Console window allows you to interact with a single execution context, which represents a single instance of the web platform host (WWAHost.exe), at a time. Dans certains scénarios, votre application peut démarrer une autre instance de l’hôte, comme lorsque vous utilisez un iframe, un contrat de partage, un traitement web ou un contrôle WebView .In some scenarios, your app may start another instance of the host, such as when you use an iframe, a share contract, a web worker, or a WebView control. Si une autre instance de l’hôte est en cours d’exécution, vous pouvez sélectionner un autre contexte d’exécution tout en exécutant l’application en sélectionnant le contexte d’exécution dans la liste Cible .If another instance of the host is running, you can select a different execution context while running the app by selecting the execution context in the Target list.

L’illustration suivante montre la liste Cible dans la fenêtre de la console JavaScript.The following illustration shows the Target list in the JavaScript Console window.

Cibler la sélection dans la fenêtre de console JavaScriptTarget selection in the JavaScript console window

Vous pouvez aussi basculer le contexte d’exécution à l’aide de la commande cd , mais vous devez connaître le nom de l’autre contexte d’exécution et la référence que vous devez utiliser dans la portée.You can also switch the execution context by using the cd command, but you must know the name of the other execution context and the reference you use must be in scope. La liste Cible offre le meilleur accès aux autres contextes d’exécution.The Target list provides better access to other execution contexts.

Voir aussiSee Also

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