Déboguer votre application Teams localement

Le Kit de ressources Microsoft Teams vous permet de déboguer et d’afficher un aperçu local de votre application Microsoft Teams. Pendant le processus de débogage, teams Toolkit démarre automatiquement les services d’application, lance les débogueurs et charge l’application Teams. Vous pouvez afficher un aperçu local de votre application Teams dans le client web Teams après le débogage.

Déboguer votre application Teams localement pour Visual Studio Code

Teams Toolkit dans Microsoft Visual Studio Code vous offre les fonctionnalités permettant d’automatiser le débogage de votre application Teams localement. Visual Studio Code vous permet de déboguer l’onglet, le bot et l’extension de message. Vous devez configurer teams Toolkit avant de déboguer votre application.

Configurer votre kit de ressources Teams pour le débogage

Les étapes suivantes vous aident à configurer votre kit de ressources Teams avant de lancer le processus de débogage :

npm run prepare-storage:teamsapp

Déboguer votre application

Après le processus d’installation initial, Teams Toolkit démarre les processus suivants :

• Démarre les services d’application.
• Lance les configurations de débogage
• Charge l’application Teams

Démarre les services d’application.

Exécute les tâches telles que définies dans .vscode/tasks.json. Par défaut, le nom de la tâche est "Start application". Si votre projet contient plusieurs composants, il y aura plus de tâches dépendantes.

// .vscode/tasks.json
{
    "label": "Start application",
    "dependsOn": [
        "Start Frontend", // Tab
        "Start Backend", // Azure Functions
        "Start Bot" // Bot or message extensions
    ]
}

L’image suivante affiche les noms des tâches dans les onglets SORTIE et TERMINAL de Visual Studio Code lors de l’exécution de l’onglet, de l’extension de bot ou de message et d’Azure Functions.

Démarrer le tunnel local

Utilisez le tunnel de développement comme service de tunnel local pour rendre votre point de terminaison de message de bot local public.

Tunnel de développement

Pour migrer manuellement votre tâche de tunnel local à partir d’un projet v4, mettez à jour le code suivant dans le .vscode/tasks.json fichier :

{
      "label": "Start local tunnel",
      "type": "teamsfx",
      "command": "debug-start-local-tunnel",
      "args": {
          "type": "dev-tunnel",
          "ports": [
              {
                  "portNumber": 3978,
                  "protocol": "http",
                  "access": "public",
                  "writeToEnvironmentFile": {
                      "endpoint": "BOT_ENDPOINT",
                      "domain": "BOT_DOMAIN"
                  }
              }
        ],
          "env": "local"
      },
      "isBackground": true,
      "problemMatcher": "$teamsfx-local-tunnel-watch"
    },

Pour utiliser un autre port pour le service bot local, modifiez le portNumber dans le .vscode/tasks.json fichier et modifiez également le portNumber dans le index.js fichier ou index.ts .

Le tableau suivant répertorie les arguments requis :

L’argument ports doit être un tableau d’objets, chaque objet spécifiant la configuration d’un port particulier. Chaque objet doit contenir les champs suivants :

L’objet writeToEnvironmentFile contient deux champs :

Quand writeToEnvironmentFile est inclus, les variables d’environnement spécifiées sont écrites dans le .env fichier. Lorsque le champ est omis, aucune variable d’environnement n’est écrite dans le fichier.

Lance les configurations de débogage

Lance les configurations de débogage telles que définies dans .vscode/launch.json.

Le tableau suivant répertorie les noms et types de configuration de débogage pour le projet avec une application d’extension d’onglet, de bot ou de message et Azure Functions :

Le tableau suivant répertorie les noms et types de configuration de débogage pour le projet avec application de bot, Azure Functions et sans application d’onglet :

Charge l’application Teams

La configuration Attacher au serveur frontal ou Lancer l’application lance l’instance de navigateur Microsoft Edge ou Chrome pour charger le client Teams dans la page web. Une fois le client Teams chargé, chargez l’application Teams qui est contrôlée par l’URL de chargement définie dans les configurations de lancement Microsoft Teams. Lorsque le client Teams se charge dans le navigateur web, sélectionnez Ajouter ou sélectionnez une option dans la liste déroulante en fonction de vos besoins.

Votre application est ajoutée à Teams !

Étape suivante

Voir aussi

• Vue d’ensemble du Kit de ressources Teams
• Présentation d’Azure Functions
• Utiliser Teams Shared Computer Toolkit pour mettre en service des ressources cloud
• Ajouter des guides pratiques à l’application Teams
• Déployer à partir du cloud
• Gérer plusieurs environnements dans Teams Shared Computer Toolkit