Déboguer une application JavaScript ou TypeScript dans Visual Studio

Vous pouvez déboguer du code JavaScript et TypeScript à l’aide de Visual Studio. Vous pouvez atteindre des points d’arrêt, attacher le débogueur, inspecter des variables, afficher la pile des appels et utiliser d’autres fonctionnalités de débogage.

Tip

Si vous n’avez pas encore installé Visual Studio, accédez à la page Téléchargements Visual Studio pour l’installer gratuitement.

Configurer le débogage

Pour les projets .esproj dans Visual Studio 2022, Visual Studio Code utilise un fichier launch.json pour configurer et personnaliser le débogueur. launch.json est un fichier de configuration du débogueur.

Visual Studio attache le débogueur uniquement au code utilisateur. Pour les projets .esproj, vous pouvez configurer le code utilisateur (également appelé paramètres Just My Code) dans Visual Studio à l’aide du paramètre skipFiles dans launch.json. Cela fonctionne de la même façon que les paramètres de launch.json dans VS Code. Pour plus d’informations sur skipFiles et d’autres options de configuration du débogueur, consultez Ignorer le code sans intérêt et Attributs d'une configuration de lancement.

Déboguer un script côté serveur

1. Une fois votre projet ouvert dans Visual Studio, ouvrez un fichier JavaScript côté serveur (par exemple, server.js), cliquez dans la marge pour définir un point d’arrêt :

   

   Les points d’arrêt sont la fonctionnalité la plus basique et la plus essentielle d’un débogage fiable. Un point d’arrêt indique où Visual Studio doit suspendre votre code en cours d’exécution. Vous pouvez donc examiner les valeurs des variables ou le comportement de la mémoire, ou si une branche de code est en cours d’exécution.

2. Pour exécuter votre application, appuyez sur F5 (Déboguer>Démarrer le débogage).

   Le débogueur s’interrompt au point d’arrêt que vous définissez (l’IDE met en surbrillance l’instruction en arrière-plan jaune). Désormais, vous pouvez inspecter l’état de votre application en passant le curseur sur les variables en cours, en utilisant des fenêtres de débogage telles que les fenêtresLocals et Espion.

   

3. Appuyez sur F5 pour continuer l’application.

4. Si vous souhaitez utiliser les outils de développement Chrome, appuyez sur F12 dans le navigateur Chrome. À l’aide de ces outils, vous pouvez examiner le DOM ou interagir avec l’application à l’aide de la console JavaScript.

Déboguer un script côté client

Visual Studio fournit la prise en charge du débogage côté client uniquement pour Chrome et Microsoft Edge. Dans certains scénarios, le débogueur atteint automatiquement les points d'arrêt dans le code JavaScript et TypeScript ainsi que dans les scripts incorporés sur des fichiers HTML.

• Pour déboguer un script côté client dans les applications ASP.NET, ouvrez le volet Outils>Options et développez la section Tous les paramètres>Débogage>Général. Sélectionnez l’option Activer le débogage JavaScript pour ASP.NET (Chrome et Edge).

  Si vous préférez utiliser chrome Developer Tools ou F12 Tools pour Microsoft Edge pour déboguer le script côté client, vous devez désactiver ce paramètre.

  Pour plus d’informations, consultez ce billet de blog pour Google Chrome. Pour déboguer TypeScript dans ASP.NET Core, consultez Ajouter TypeScript à une application ASP.NET Core existante.

• Pour les projets .esproj dans Visual Studio 2022, vous pouvez déboguer un script côté client à l’aide de méthodes de débogage standard pour atteindre les points d’arrêt. Pour configurer le débogage, vous pouvez modifier launch.json paramètres, qui fonctionnent de la même façon que dans VS Code. Pour plus d’informations sur les options de configuration du débogueur, consultez Attributs de configuration de lancement.

Note

Pour ASP.NET et ASP.NET Core, le débogage des scripts intégrés dans les fichiers .CSHTML n'est pas pris en charge. Le code JavaScript doit se trouver dans des fichiers distincts pour activer le débogage.

Préparez votre application pour le débogage

Si votre source est minifiée ou créée par un transpileur comme TypeScript ou Babel, utilisez les fichiers source map pour une expérience de débogage optimale. Vous pouvez même attacher le débogueur à un script côté client en cours d’exécution sans les cartes sources. Toutefois, vous pouvez uniquement définir et atteindre des points d’arrêt dans le fichier minifié ou transpilé, et non dans le fichier source. Par exemple, dans une application Vue.js, le script minifié est passé sous forme de chaîne à une instruction eval, et il n’existe aucun moyen de naviguer efficacement dans ce code avec le débogueur Visual Studio, à moins que vous n'utilisiez des source maps. Pour les scénarios de débogage complexes, vous pouvez utiliser les outils de développement Chrome ou les outils F12 pour Microsoft Edge à la place.

Configurer manuellement le navigateur pour le débogage

Dans Visual Studio 2022, la procédure décrite dans cette section est disponible uniquement dans les applications ASP.NET et ASP.NET Core. Il est nécessaire uniquement dans les scénarios rares où vous devez personnaliser les paramètres du navigateur. Dans les projets .esproj , le navigateur est configuré pour le débogage par défaut.

Pour ce scénario, utilisez Microsoft Edge ou Chrome.

1. Fermez toutes les fenêtres du navigateur cible, soit microsoft Edge, soit les instances Chrome.

   D’autres instances de navigateur peuvent empêcher l’ouverture du navigateur avec le débogage activé. (Les extensions de navigateur peuvent être en cours d’exécution et intercepter le mode de débogage complet. Vous devrez peut-être ouvrir le Gestionnaire des tâches pour rechercher et fermer des instances inattendues de Chrome ou Edge.)

   Pour obtenir de meilleurs résultats, arrêtez toutes les instances de Chrome, même si vous travaillez avec Microsoft Edge. Les deux navigateurs utilisent la même base de code chromium.

2. Démarrez votre navigateur avec le débogage activé.

   À partir de Visual Studio 2019, vous pouvez définir l’indicateur --remote-debugging-port=9222 lors du lancement du navigateur en sélectionnant Parcourir avec...> dans la barre d’outils Déboguer.

   

   Si vous ne voyez pas la commande Parcourir avec... dans la barre d’outils Déboguer, sélectionnez un autre navigateur, puis réessayez.

   Dans la boîte de dialogue Parcourir avec, choisissez Ajouter, puis définissez l’indicateur dans le champ Arguments. Utilisez un autre nom convivial pour le navigateur, comme mode de débogage Edge ou mode de débogage Chrome. Pour plus d’informations, consultez les notes de publication .

   

   Sélectionnez Parcourir pour démarrer votre application en mode débogage avec le navigateur.

   Vous pouvez également ouvrir la commande Exécuter à partir du bouton Démarrer Windows (cliquez avec le bouton droit et choisissez Exécuter), puis entrez la commande suivante :

   msedge --remote-debugging-port=9222

   or,

   chrome.exe --remote-debugging-port=9222

   Cela démarre votre navigateur avec le débogage activé.

   L’application n’est pas encore en cours d’exécution. Vous obtenez donc une page de navigateur vide. (Si vous démarrez le navigateur à l’aide de la commande Exécuter, vous devez coller l’URL correcte pour votre instance d’application.)

Attacher le débogueur au script côté client

Dans certains scénarios, vous devrez peut-être attacher le débogueur à une application en cours d’exécution.

Pour attacher le débogueur à partir de Visual Studio et atteindre les points d’arrêt dans le code côté client, vous devez l’aider à identifier le processus approprié. Voici une façon de l’activer.

1. Vérifiez que votre application s’exécute dans le navigateur en mode débogage, comme décrit dans la section précédente.

   Si vous avez créé une configuration de navigateur avec un nom convivial, choisissez-le comme cible de débogage, puis appuyez sur Ctrl+F5 (Déboguer>Démarrer sans débogage) pour exécuter l’application dans le navigateur.

2. Basculez vers Visual Studio, puis définissez un point d’arrêt dans votre code source, qui peut être un fichier JavaScript, un fichier TypeScript ou un fichier JSX. (Définissez le point d’arrêt dans une ligne de code qui autorise les points d’arrêt, tels qu’une instruction return ou une déclaration var.)

   

   Pour rechercher le code spécifique dans un fichier transpilé, utilisez Ctrl+F (Modifier rechercher>Trouver et remplacer>Recherche rapide).

   Pour le code côté client, atteindre un point d’arrêt dans un fichier TypeScript, .vue ou JSX nécessite généralement l’utilisation de mappages sources. Une carte source doit être configurée correctement pour prendre en charge le débogage dans Visual Studio.

3. Choisissez Déboguer>Attacher au processus.

   Tip

   À partir de Visual Studio 2017, une fois que vous vous êtes attaché au processus la première fois en suivant ces étapes, vous pouvez rapidement vous rattacher au même processus en choisissant Déboguer>Rattacher au processus.

4. Dans la boîte de dialogue Attacher au processus, sélectionnez JavaScript et TypeScript (Chrome Dev Tools/V8 Inspector) comme type de connexion.

   La cible du débogueur, telle que http://localhost:9222, doit apparaître dans le champ Cible de connexion.

5. Dans la liste des instances de navigateur, sélectionnez le processus de navigateur avec le port hôte correct (https://localhost:7184/ dans cet exemple), et sélectionnez Attacher.

   Le port (par exemple, 7184) peut également apparaître dans le champ Titre pour vous aider à sélectionner l’instance de navigateur appropriée.

   L'exemple suivant montre comment cela se présente pour le navigateur Microsoft Edge.

   

   Tip

   Si le débogueur ne s’attache pas et que le message « Échec du lancement de l’adaptateur de débogage » ou « Impossible d’attacher au processus » s’affiche. Une opération n’est pas légale dans l’état actuel. » utilisez le Gestionnaire des tâches Windows pour fermer toutes les instances du navigateur cible avant de démarrer le navigateur en mode débogage. Les extensions de navigateur peuvent être en cours d’exécution et empêcher le mode de débogage complet.

6. Le code avec le point d’arrêt a peut-être déjà été exécuté, actualisez votre page de navigateur. Si nécessaire, prenez des mesures pour que le code avec le point d’arrêt s’exécute.

   Lors de la pause dans le débogueur, vous pouvez examiner l’état de votre application en pointant sur des variables et en utilisant des fenêtres de débogueur. Vous pouvez avancer le débogueur en parcourant le code (F5, F10 et F11). Pour plus d’informations sur les fonctionnalités de débogage de base, consultez Premier aperçu du débogueur.

   Vous pouvez atteindre le point d’arrêt dans un fichier transpilé .js ou un fichier source, selon le type de votre application, les étapes que vous avez suivies précédemment et d’autres facteurs tels que l’état de votre navigateur. Dans les deux cas, vous pouvez parcourir le code et examiner des variables.

   • Si vous devez entrer dans le code d'un fichier TypeScript, JSX ou .vue source et que vous ne pouvez pas le faire, vérifiez que votre environnement est configuré correctement, comme décrit dans la section sourcemaps de la documentation VS Code.

   • Si vous devez décomposer le code dans un fichier JavaScript transpilé (par exemple, app-bundle.js) et ne pouvez pas le faire, supprimez le fichier de mappage source, filename.js.map.

Déboguer JavaScript dans des fichiers dynamiques à l’aide de Razor (ASP.NET)

Dans Visual Studio 2022, vous pouvez déboguer les pages Razor à l'aide de points d'arrêt. Pour plus d’informations, consultez Utilisation des outils de débogage dans Visual Studio.

Contenu connexe

Propriétés, React, Angular et Vue