Déboguer votre Teams application

Article
10/28/2024

Microsoft Teams Toolkit vous aide à déboguer et à afficher un aperçu de votre application Microsoft Teams. Le débogage est le processus de vérification, de détection et de correction des problèmes ou bogues pour garantir que le programme s’exécute correctement dans Teams.

Déboguer votre application Teams pour Visual Studio Code

Teams Toolkit dans Microsoft Visual Studio Code automatise le processus de débogage. Vous pouvez détecter les erreurs et les corriger, ainsi qu’afficher un aperçu de l’application Teams. Vous pouvez également personnaliser les paramètres de débogage pour créer votre onglet ou bot.

Pendant le processus de débogage :

Teams Toolkit démarre automatiquement les services d’application, lance les débogueurs et charge l’application Teams.
Teams Toolkit vérifie les prérequis pendant le processus de débogage en arrière-plan.
Votre application Teams est disponible en préversion dans le client web Teams localement après le débogage.
Vous pouvez également personnaliser les paramètres de débogage pour utiliser les points de terminaison de votre robot, le certificat de développement ou le composant de débogage partiel pour charger votre application configurée.
Visual Studio Code vous permet de déboguer l’onglet, le bot, l’extension de message et Azure Functions.

Principales fonctionnalités de débogage du Kit de ressources Teams

Teams Shared Computer Toolkit prend en charge les fonctionnalités de débogage suivantes :

Démarrer le débogage
Débogage multi-cibles
Basculer les points d’arrêt
Recharge à chaud
Arrêter le débogage
Outil de test d’application Teams
Déboguer des applications dans le client de bureau Teams

Teams Toolkit effectue des fonctions en arrière-plan pendant le processus de débogage, notamment la vérification des prérequis requis pour le débogage. Vous pouvez voir la progression du processus de vérification dans le canal de sortie du Kit de ressources Teams. Dans le processus d’installation, vous pouvez inscrire et configurer votre application Teams.

Démarrer le débogage

Vous pouvez appuyer sur F5 en tant qu’opération unique pour démarrer le débogage. Le kit de ressources Teams commence à case activée prérequis, inscrit Microsoft Entra application, l’application Teams et inscrit le bot, démarre les services et lance le navigateur.

Débogage multi-cibles

Teams Toolkit utilise la fonctionnalité de débogage multi-cible pour déboguer simultanément l’onglet, le bot, l’extension de message et Azure Functions.

Basculez les points d’arrêt.

Vous pouvez activer/désactiver les points d’arrêt sur les codes sources des onglets, des bots, des extensions de message et des Azure Functions. Les points d'arrêt s'exécutent lorsque vous interagissez avec l'application Teams dans un navigateur Web. L’image suivante montre le point d’arrêt bascule :

Recharge à chaud

Vous pouvez mettre à jour et enregistrer les codes sources d’onglet, de bot, d’extension de message et d’Azure Functions en même temps lorsque vous déboguez l’application Teams. L’application se recharge et le débogueur se rattache aux langages de programmation.

Arrêter le débogage

Lorsque vous avez terminé le débogage local, vous pouvez sélectionner Arrêter (Maj+F5) ou [Alt] Déconnecter (Maj+F5) dans la barre d’outils de débogage flottante pour arrêter toutes les sessions de débogage et arrêter les tâches. L’image suivante illustre l’action d’arrêt du débogage :

Capture d’écran montrant l’option Arrêter le débogage.

Outil de test d’application Teams

L’outil de test d’application Teams facilite le débogage de vos applications basées sur des bots. Vous pouvez discuter avec votre bot et voir ses messages et cartes adaptatives tels qu’ils apparaissent dans Teams. Vous n’avez pas besoin d’un compte de développeur Microsoft 365, d’un tunneling ou d’une inscription d’application et de bot Teams pour utiliser l’outil de test. Pour plus d’informations, consultez Outil de test d’application Teams.

Déboguer des applications dans le client de bureau Teams

Le Kit de ressources Microsoft Teams vous permet de déboguer et d’afficher un aperçu de votre application Microsoft Teams dans le client de bureau. Pour plus d’informations, consultez déboguer des applications dans le client de bureau Teams.

Préparer le débogage

Les étapes suivantes vous aident à préparer le débogage :

Si vous êtes déjà inscrit à Microsoft 365, connectez-vous à Microsoft 365. Pour plus d’informations, consultez Programme pour les développeurs Microsoft 365.

Basculez les points d’arrêt.

Assurez-vous que vous pouvez activer les points d’arrêt sur les codes sources des onglets, des bots, des extensions de message et des Azure Functions. Pour plus d’informations, consultez Basculer les points d’arrêt.

Personnaliser les paramètres de débogage

Teams Toolkit vous permet de personnaliser les paramètres de débogage pour créer votre onglet ou bot. Pour plus d’informations sur la liste complète des options personnalisables, consultez la documentation sur les paramètres de débogage.

Vous pouvez également personnaliser les paramètres de débogage pour votre application bot existante.

Découvrez comment utiliser un bot existant pour le débogage

Teams Toolkit crée Microsoft Entra applications pour les projets avec bot par défaut à l’aide d’une botAadApp/create action.

Pour utiliser un bot existant, vous pouvez définir BOT_ID et SECRET_BOT_PASSWORD avec env/.env.local vos propres valeurs.

Utilisez l’exemple d’extrait de code suivant pour configurer un bot existant pour le débogage :

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local

# Generated during provision, you can also add your own variables.
BOT_ID={YOUR_OWN_BOT_ID}
...

SECRET_BOT_PASSWORD={YOUR_OWN_BOT_PASSWORD}
...

Personnaliser les scénarios

Voici une liste de scénarios de débogage que vous pouvez utiliser :

Ignorer les vérifications des prérequis

> "prerequisites" "Validate prerequisites" "args" >Sous .vscode/tasks.json , mettez à jour les vérifications de prérequis que vous souhaitez ignorer.

Capture d’écran montrant l’ignorer les vérifications des prérequis.

Utiliser votre certificat de développement

Dans teamsapp.local.yml, supprimez devCert de l’action devTool/install (ou supprimez l’action entière devTool/install si elle contient devCertuniquement ).

Dans teamsapp.local.yml, définissez "SSL_CRT_FILE" et "SSL_KEY_FILE" en action sur file/createOrUpdateEnvironmentFile le chemin d’accès du fichier de certificat et le chemin du fichier de clé.

# teamsapp.local.yml
...
  # Remove devCert or this whole action
  - uses: devTool/install
    with:
      # devCert:
  ...
  - uses: file/createOrUpdateEnvironmentFile
    with:
      target: ./.localSettings
      envs:
        ...
        # set your own cert values
        SSL_CRT_FILE: ...
        SSL_KEY_FILE: ...
...

Personnaliser la commande d’installation npm

Dans teamsapp.local.yml, modifiez args l’action cli/runNpmCommand .

# teamsapp.local.yml
...
  - uses: cli/runNpmCommand
    with:
      # edit the npm command args
      args: install --no-audit
...

Modifier les ports

Bot
1. Recherchez "3978" dans votre projet et recherchez des apparences dans tasks.json et index.js.
2. Remplacez-le par votre port.
Tab
1. Recherchez "53000" dans votre projet et recherchez des apparences dans teamsapp.local.yml et tasks.json.
2. Remplacez-le par votre port.

Utiliser votre propre package d’application

Teams Toolkit par défaut crée un ensemble d’actions teamsApp pour gérer le package d’application. Vous pouvez les mettre à jour dans teamsapp.local.yml pour utiliser votre propre package d’application.

# teamsapp.local.yml
...
  - uses: teamsApp/create # Creates a Teams app
    ...
  - uses: teamsApp/validateManifest # Validate using manifest schema
    ...
  - uses: teamsApp/zipAppPackage # Build Teams app package with latest env value
    ...
  - uses: teamsApp/validateAppPackage # Validate app package using validation rules
    ...
  - uses: teamsApp/update # Apply the app manifest (previously called Teams app manifest) to an existing Teams app in Teams Developer Portal.
    ...
...

Utiliser votre propre tunnel

"Start Teams App Locally"Sous .vscode/tasks.json , vous pouvez mettre à jour "Start Local tunnel".

Capture d’écran montrant les tâches d’utilisation de votre propre tunnel.

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local
...
BOT_DOMAIN={YOUR_OWN_TUNNEL_DOMAIN}
BOT_ENDPOINT={YOUR_OWN_TUNNEL_URL}
...

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local
...
BOT_DOMAIN={YOUR_OWN_TUNNEL_DOMAIN}
BOT_ENDPOINT={YOUR_OWN_TUNNEL_URL}
...

Ajouter des variables d’environnement

Vous pouvez ajouter des variables d’environnement à .localConfigs fichier pour l’onglet, le bot, l’extension de message et Azure Functions. Teams Shared Computer Toolkit charge les variables d’environnement que vous avez ajoutées pour démarrer les services pendant le débogage local.

Remarque

Veillez à démarrer un nouveau débogage local après avoir ajouté de nouvelles variables d’environnement, car les variables d’environnement ne prennent pas en charge le rechargement à chaud.

Déboguer un composant partiel

Teams Toolkit utilise Visual Studio Code débogage multi-cible pour déboguer simultanément l’onglet, le bot, l’extension de message et Azure Functions. Vous pouvez mettre à jour .vscode/launch.json et .vscode/tasks.json déboguer un composant partiel. Si vous souhaitez déboguer l'onglet uniquement dans un projet tab plus bot avec Azure Functions, utilisez les étapes suivantes :

Mettez à jour "Attach to Bot" et "Attach to Backend" à partir du composé de débogage dans .vscode/launch.json.

{
    "name": "Debug in Teams (Edge)",
     "configurations": [
        "Attach to Frontend (Edge)",
        // "Attach to Bot",
        // "Attach to Backend"
        ],
        "preLaunchTask": "Start Teams App Locally",
        "presentation": {
            "group": "all",
            "order": 1
        },
        "stopAll": true

}

Mettre à jour "Start Backend" et "Start Bot" à partir de la tâche Démarrer tout dans .vscode/tasks.json.

{

    "label": "Start application",
    "dependsOn": [
        "Start Frontend",
          // "Start Backend",
          // "Start Bot"

      ]

}

Déboguer votre application localement

Partager via

Déboguer votre Teams application

Déboguer votre application Teams pour Visual Studio Code

Principales fonctionnalités de débogage du Kit de ressources Teams

Démarrer le débogage

Débogage multi-cibles

Basculez les points d’arrêt.

Recharge à chaud

Arrêter le débogage

Outil de test d’application Teams

Déboguer des applications dans le client de bureau Teams

Préparer le débogage

Basculez les points d’arrêt.

Personnaliser les paramètres de débogage

Personnaliser les scénarios

Next

Voir aussi

Ressources supplémentaires

Partager via

Déboguer votre Teams application

Déboguer votre application Teams pour Visual Studio Code

Principales fonctionnalités de débogage du Kit de ressources Teams

Démarrer le débogage

Débogage multi-cibles

Basculez les points d’arrêt.

Recharge à chaud

Arrêter le débogage

Outil de test d’application Teams

Déboguer des applications dans le client de bureau Teams

Préparer le débogage

Connectez-vous à Microsoft 365.

Basculez les points d’arrêt.

Personnaliser les paramètres de débogage

Personnaliser les scénarios

Next

Voir aussi

Ressources supplémentaires