Déboguer une application JavaScript ou TypeScript dans Visual Studio

Vous pouvez déboguer un 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.

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 gouttière pour définir un point d’arrêt :

   

   Les points d'arrêt constituent une fonctionnalité élémentaire et essentielle de toute procédure de débogage fiable. Un point d’arrêt indique l’endroit où Visual Studio doit suspendre votre code en cours d’exécution, afin que vous puissiez examiner les valeurs des variables ou le comportement de la mémoire, ou si une branche du code est en cours d’exécution ou non.

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 (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’exécution de 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ébogage de script côté client

Visual Studio ne prend en charge le débogage côté client que pour Chrome et Microsoft Edge. Dans certains scénarios, le débogueur marque automatiquement des points d'arrêt dans le code JavaScript et TypeScript, ainsi que dans les scripts intégrés aux fichiers HTML.

• Pour le débogage d’un script côté client dans des applications ASP.NET, choisissez Outils>Options>Débogage, puis sélectionnez Activer le débogage JavaScript pour ASP.NET (Chrome, Edge et Internet Explorer).

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

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

• Pour les applications Node.js et autres projets JavaScript, suivez les étapes décrites ici.

Préparez votre application en vue de son débogage

Si votre source est minifiée ou créée par un transpileur tel qu’un TypeScript ou Babel, utilisez mappages sources 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. Mais vous pourrez seulement 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 parcourir ce code efficacement à l’aide du débogueur Visual Studio, à moins d’utiliser des mappages de sources. Dans certains scénarios de débogage complexes, vous pouvez utiliser à la place les outils de développement Chrome ou les outils F12 pour Microsoft Edge.

Pour obtenir de l’aide sur la génération de mappages sources, consultez Générer des mappages sources pour le débogage.

Préparez le navigateur pour le débogage

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

1. Fermez toutes les fenêtres du navigateur cible, qu'il s'agisse de Microsoft Edge ou de Chrome.

   D’autres instances de navigateur peuvent empêcher le navigateur de s’ouvrir avec le débogage activé. (Les extensions de navigateur peuvent être en cours d'exécution et intercepter le mode de débogage complet, de sorte que vous devrez peut-être ouvrir le Gestionnaire des tâches pour trouver et fermer les instances inattendues de Chrome ou de Edge).

   Pour de meilleurs résultats, fermez 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 au lancement du navigateur en sélectionnant Naviguer avec...> dans la barre d’outils Déboguer.

   

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

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

   

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

   Vous pouvez également ouvrir la commande Exécuter à partir du bouton Démarrer de Windows (faites un clic droit et choisissez Exécuter), puis entrez la commande suivante :

   msedge --remote-debugging-port=9222

   ou

   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 l'instance de votre application).

Attachez le débogueur à un script côté client

Résolution des problèmes liés aux points d’arrêt et aux mappages sources

Si vous devez accéder au code d’un fichier source TypeScript ou JSX et que vous ne parvenez pas à le faire, utilisez Attacher au processus comme décrit dans la section précédente pour attacher le débogueur. Vérifiez que votre environnement est configuré correctement :

• Fermez toutes les instances de navigateur, y compris les extensions Chrome (à l’aide du Gestionnaire des tâches), afin de pouvoir exécuter le navigateur en mode débogage.

• Veillez à démarrer le navigateur en mode débogage.

• Assurez-vous que votre fichier de mappage source inclut le chemin relatif correct de votre fichier source et qu’il n’inclut pas de préfixes non pris en charge, tels que webpack:///, ce qui empêche le débogueur Visual Studio de localiser un fichier source. Par exemple, une référence comme webpack:///.app.tsx peut être corrigée en ./app.tsx. Vous pouvez le faire manuellement dans le fichier de carte source (ce qui est utile pour les tests) ou via une configuration de build personnalisée. Pour plus d’informations, consultez Générer des mappages sources pour le débogage.

Sinon, si vous devez vous décomposer en code dans un fichier source (par exemple, app.tsx) et ne pouvez pas le faire, essayez d’utiliser l’instruction debugger; dans le fichier source ou définissez des points d’arrêt dans les outils de développement Chrome (ou F12 Tools pour Microsoft Edge) à la place.

Générer des mappages de sources pour le débogage

Visual Studio permet d’utiliser et de générer des mappages de sources sur les fichiers sources JavaScript. Cela est souvent nécessaire si votre source est minimisée ou créée par un transpiler comme TypeScript ou Babel. Les options disponibles varient selon le type de projet.

• Par défaut, un projet TypeScript dans Visual Studio génère pour vous des mappages de sources. Pour plus d’informations, consultez Configurer des mappages de sources à l’aide d’un fichier tsconfig.json.

• Dans un projet JavaScript, vous pouvez générer des mappages de sources à l’aide d’un bundler comme webpack et d’un compilateur comme TypeScript (ou Babel), que vous pouvez ajouter à votre projet. Pour le compilateur TypeScript, vous devez également ajouter un fichier tsconfig.json et définir l’option de compilateur sourceMap. Pour obtenir un exemple montrant comment procéder à l’aide d’une configuration webpack de base, consultez Créer une application Node.js avec React.

Afin de configurer les paramètres avancés pour les mappages de sources, utilisez un fichier tsconfig.json ou les paramètres du projet dans un projet TypeScript, mais pas les deux.

Pour activer le débogage à l’aide de Visual Studio, vous devez vous assurer que les références à votre fichier source dans le mappage source généré sont correctes (cela peut nécessiter des tests). Par exemple, si vous utilisez webpack, les références dans le fichier de mappage source incluent le préfixe webpack:///, ce qui empêche Visual Studio de trouver un fichier source TypeScript ou JSX. Plus précisément, lorsque vous corrigez ce problème à des fins de débogage, la référence au fichier source (par exemple, app.tsx) doit être remplacée par quelque chose comme webpack:///./app.tsx par quelque chose comme ./app.tsx, qui permet le débogage (le chemin d’accès est relatif à votre fichier source). L’exemple suivant montre comment configurer des mappages de sources dans webpack, qui est l’un des bundlers les plus courants, afin qu’ils fonctionnent avec Visual Studio.

(Webpack uniquement) Si vous définissez le point d’arrêt dans un fichier TypeScript de JSX (plutôt qu’un fichier JavaScript transpilé), vous devez mettre à jour votre configuration webpack. Par exemple, dans webpack-config.js, vous devrez peut-être remplacer le code suivant :

  output: {
    filename: "./app-bundle.js", // This is an example of the filename in your project
  },

par ce code :

  output: {
    filename: "./app-bundle.js", // Replace with the filename in your project
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'  // Removes the webpack:/// prefix
  },

Il s’agit d’un paramètre de développement uniquement pour activer le débogage du code côté client dans Visual Studio.

Pour les scénarios complexes, les outils de navigateur (F12) fonctionnent parfois mieux pour le débogage, car ils ne nécessitent pas de modification des préfixes personnalisés.

Configurer des mappages de sources à l’aide d’un fichier tsconfig.json

Si vous ajoutez un fichier tsconfig.json à votre projet, Visual Studio traite la racine du répertoire comme un projet TypeScript. Pour ajouter le fichier, faites un clic droit sur votre projet dans l’Explorateur de solutions, puis choisissez Ajouter > Nouvel élément > Fichier de configuration JSON TypeScript. Un fichier tsconfig.json comme ce qui suit est ajouté à votre projet.

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

Options du compilateur pour le fichier tsconfig.json

• inlineSourceMap : émettre un seul fichier avec des mappages sources au lieu de créer un mappage source distinct pour chaque fichier source.
• inlineSources : émettre la source en même temps que les mappages sources dans un seul fichier ; nécessite inlineSourceMap ou sourceMap à définir.
• mapRoot : spécifie l’emplacement où le débogueur doit trouver des fichiers de mappage source (.map) au lieu de l’emplacement par défaut. Utilisez cet indicateur si les fichiers .map à l’exécution doivent se trouver dans un emplacement autre que les fichiers .js. L’emplacement spécifié est incorporé dans le mappage de source pour diriger le débogueur vers l’emplacement des fichiers .map.
• sourceMap : génère un fichier .map correspondant.
• sourceRoot : spécifie l’emplacement où le débogueur doit trouver les fichiers TypeScript au lieu des emplacements sources. Utilisez cet indicateur si les sources runtime doivent se trouver dans un emplacement autre que celui défini au moment de la conception. L’emplacement spécifié est incorporé dans le mappage de source pour diriger le débogueur vers l’emplacement des fichiers sources.

Pour plus d’informations sur les options du compilateur, consultez la page Options du compilateur dans le manuel TypeScript.

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

Contenu connexe

Propriétés, React, Angular et Vue