Debuggen Sie Ihre Teams-App

  • Artikel

Das Teams-Toolkit unterstützt Sie beim Debuggen und Anzeigen einer Vorschau Ihrer Microsoft Teams-App. Debuggen ist der Prozess der Überprüfung, Erkennung und Behebung von Problemen oder Fehlern, um sicherzustellen, dass das Programm in Teams erfolgreich ausgeführt wird.

Debuggen Ihrer Teams-App für Visual Studio Code

Teams Toolkit in Microsoft Visual Studio Code automatisiert den Debugprozess. Sie können Fehler erkennen und beheben sowie eine Vorschau der Teams-App anzeigen. Sie können auch Debugeinstellungen anpassen, um Ihre Registerkarte oder Ihren Bot zu erstellen.

Während des Debugvorgangs:

  • Teams Toolkit startet automatisch App-Dienste, startet Debugger und lädt die Teams-App quer.
  • Das Teams-Toolkit überprüft die Voraussetzungen während des Debughintergrundprozesses.
  • Ihre Teams-App steht nach dem Debuggen lokal im Teams-Webclient als Vorschau zur Verfügung.
  • Sie können ebenfalls Debugeinstellungen anpassen, um Ihre Botendpunkte, Ihr Entwicklungszertifikat, oder Ihre Teilkomponente zum Laden Ihrer konfigurierten App zu verwenden.
  • Visual Studio Code ermöglicht das Debuggen von Registerkarten, Bots, Nachrichtenerweiterungen und Azure Functions.

Wichtige Debugfeatures des Teams-Toolkits

Das Teams-Toolkit unterstützt die folgenden Debugfeatures:

Das Teams-Toolkit führt während des Debugprozesses Hintergrundfunktionen aus, einschließlich der Überprüfung der für das Debuggen erforderlichen Voraussetzungen. Sie können den Fortschritt des Überprüfungsprozesses im Ausgabekanal von Teams Toolkit anzeigen. Im Setupprozess können Sie Ihre Teams-App registrieren und konfigurieren.

Debugging starten

Sie können F5 als einzelnen Vorgang drücken, um das Debuggen zu starten. Das Teams-Toolkit beginnt mit der Überprüfung der Voraussetzungen, registriert Microsoft Azure Active Directory -App (Azure AD) und die Teams-App und registriert den Bot, startet Dienste und startet den Browser.

Debuggen mit mehreren Zielen

Teams Toolkit nutzt die Multi-Target-Debugging-Funktion zum gleichzeitigen Debuggen von Registerkarten, Bots, Nachrichtenerweiterungen und Azure Functions.

Umschalthaltepunkte

Sie können Haltepunkte in den Quellcodes von Registerkarten, Bots, Nachrichtenerweiterungen und Azure Functions umschalten. Die Haltepunkte werden ausgeführt, wenn Sie in einem Webbrowser mit der Teams-App interagieren. Die folgende Abbildung zeigt den Haltepunkt umschalten:

Screenshot: Umschalten von Haltepunkten

Hot Reload

Sie können die Quellcodes von Registerkarten, Bots, Nachrichtenerweiterungen und Azure Functions gleichzeitig beim Debuggen der Teams-App aktualisieren und speichern. Die App wird neu geladen, und der Debugger wird erneut an die Programmiersprachen angefügt.

Screenshot: Hot Reload für Quellcodes

Debuggen beenden

Wenn Sie das lokale Debuggen abgeschlossen haben, können Sie beenden (UMSCHALT+F5) oder [Alt] Trennen (UMSCHALT+F5) auf der symbolleiste des unverankerten Debuggens auswählen, um alle Debugsitzungen zu beenden und Aufgaben zu beenden. Die folgende Abbildung zeigt die Aktion „Debuggen beenden“:

Screenshot: Option

Vorbereiten des Debuggens

Die folgenden Schritte helfen Ihnen bei der Vorbereitung auf das Debuggen:

Bei Microsoft 365 anmelden

Wenn Sie sich bereits für Microsoft 365 registriert haben, melden Sie sich bei Microsoft 365 an. Weitere Informationen finden Sie unter Microsoft 365-Entwicklerprogramm.

Umschalthaltepunkte

Stellen Sie sicher, dass Sie Haltepunkte für die Quellcodes von Registerkarten, Bots, Nachrichtenerweiterungen und Azure Functions umschalten können. Weitere Informationen finden Sie unter Umschalten von Haltepunkten.

Anpassen von Debugeinstellungen

Mit dem Teams-Toolkit können Sie die Debugeinstellungen anpassen, um Ihre Registerkarte oder Ihren Bot zu erstellen. Weitere Informationen zur vollständigen Liste der anpassbaren Optionen finden Sie in der Dokumentation zu Debugeinstellungen.

Sie können auch Debugeinstellungen für Ihre vorhandene Bot-App anpassen.

Erfahren Sie, wie Sie einen vorhandenen Bot zum Debuggen verwenden.

Das Teams-Toolkit erstellt standardmäßig Azure AD-Apps für Projekte mit Bot mithilfe von botAadApp/create -Aktion.

Um einen vorhandenen Bot zu verwenden, können Sie und SECRET_BOT_PASSWORD mit env/.env.local Ihren eigenen Werten festlegenBOT_ID.

Verwenden Sie das folgende Codeausschnittbeispiel, um einen vorhandenen Bot für das Debuggen einzurichten:

# 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}
...

Anpassen von Szenarien

Im Folgenden finden Sie eine Liste der Debugszenarien, die Sie verwenden können:

Überspringen von Voraussetzungsprüfungen

Aktualisieren .vscode/tasks.json Sie in unter"prerequisites""Validate prerequisites">"args"> die Voraussetzungsprüfungen, die Sie überspringen möchten.

Screenshot: Überspringen von Voraussetzungsprüfungen

Verwenden Ihres Entwicklungszertifikats

  1. Entfernen teamsapp.local.ymlSie devCert in aus devTool/install aktion (oder entfernen Sie die gesamte devTool/install Aktion, wenn sie nur enthält devCert).

  2. Legen teamsapp.local.ymlSie "SSL_CRT_FILE" in und "SSL_KEY_FILE" in file/createOrUpdateEnvironmentFile Aktion auf ihren Zertifikatdateipfad und den Schlüsseldateipfad fest.

    # 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: ...
...
Npm install-Befehl anpassen

In teamsapp.local.ymlbearbeiten Sie args die cli/runNpmCommand Aktion.

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

  • Bot

    1. Suchen Sie im gesamten Projekt nach , "3978" und suchen Sie nach Darstellungen in tasks.json und index.js.

    2. Ersetzen Sie es durch Ihren Port.

      Screenshot: Suchergebnis zum Ersetzen Ihres Ports für den Bot

  • Tab

    1. Suchen Sie im gesamten Projekt nach , "53000" und suchen Sie nach Darstellungen in teamsapp.local.yml und tasks.json.

    2. Ersetzen Sie es durch Ihren Port.

      Screenshot: Suchergebnis zum Ersetzen des Ports für die Registerkarte

Verwenden Ihres eigenen App-Pakets

Teams Toolkit erstellt standardmäßig eine Reihe von Aktionen zum Verwalten von teamsApp App-Paketen. Sie können diese in teamsapp.local.yml aktualisieren, um Ihr eigenes App-Paket zu verwenden.

# 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.
    ...
...
Verwenden Eines eigenen Tunnels

In .vscode/tasks.json können Sie unter "Start Teams App Locally"aktualisieren "Start Local tunnel".

Screenshot: Aufgaben zur Verwendung eines eigenen Tunnels 

# 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}
...
Hinzufügen von Umgebungsvariablen

Sie können der .localConfigsDatei Umgebungsvariablen für Registerkarte, Bot, Nachrichtenerweiterung und Azure Functions hinzufügen. Das Teams-Toolkit lädt die Umgebungsvariablen, die Sie hinzugefügt haben, um Dienste während des lokalen Debuggens zu starten.

Hinweis

Stellen Sie sicher, dass Sie einen neuen lokalen Debugvorgang starten, nachdem Sie neue Umgebungsvariablen hinzugefügt haben, da die Umgebungsvariablen hot reload nicht unterstützen.

Teilkomponente debuggen

Teams Toolkit nutzt Visual Studio Code Multi-Target-Debugging zum gleichzeitigen Debuggen von Registerkarten, Bots, Nachrichtenerweiterungen und Azure-Funktionen. Sie können .vscode/launch.json und .vscode/tasks.json aktualisieren, um Teilkomponenten zu debuggen. Wenn Sie die Registerkarte nur in einer Registerkarte plus Bot mit Azure Functions Projekt debuggen möchten, führen Sie die folgenden Schritte aus:

  1. Aktualisieren Sie "Attach to Bot" und "Attach to Backend" aus der Debugverbindung in .vscode/launch.json.

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

}

  2. Aktualisieren Sie "Start Backend" und "Start Bot" aus der Aufgabe Alle starten in .vscode/tasks.json.

    {

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

      ]

}

Weiter

Lokales Debuggen Ihrer App

Siehe auch

Wichtig

Wir haben die Erweiterung Teams Toolkit v5 in Visual Studio Code eingeführt. Diese Version wird mit vielen neuen App-Entwicklungsfeatures bereitgestellt. Es wird empfohlen, teams Toolkit v5 zum Erstellen Ihrer Teams-App zu verwenden.

Die Teams Toolkit v4-Erweiterung wird bald veraltet sein.

Das Teams-Toolkit unterstützt Sie beim Debuggen und Anzeigen einer Vorschau Ihrer Microsoft Teams-App. Debuggen ist der Prozess der Überprüfung, Erkennung und Behebung von Problemen oder Fehlern, um sicherzustellen, dass das Programm in Teams erfolgreich ausgeführt wird.

Debuggen Ihrer Teams-App für Visual Studio Code

Teams Toolkit in Microsoft Visual Studio Code automatisiert den Debugprozess. Sie können Fehler erkennen und beheben sowie eine Vorschau der Teams-App anzeigen. Sie können auch Debugeinstellungen anpassen, um Ihre Registerkarte oder Ihren Bot zu erstellen.

Während des Debugvorgangs:

  • Teams Toolkit startet automatisch App-Dienste, startet Debugger und lädt die Teams-App quer.
  • Das Teams-Toolkit überprüft die Voraussetzungen während des Debughintergrundprozesses.
  • Ihre Teams-App steht nach dem Debuggen lokal im Teams-Webclient als Vorschau zur Verfügung.
  • Sie können ebenfalls Debugeinstellungen anpassen, um Ihre Botendpunkte, Ihr Entwicklungszertifikat, oder Ihre Teilkomponente zum Laden Ihrer konfigurierten App zu verwenden.
  • Visual Studio Code ermöglicht das Debuggen von Registerkarten, Bots, Nachrichtenerweiterungen und Azure Functions.

Wichtige Debugfeatures des Teams-Toolkits

Das Teams-Toolkit unterstützt die folgenden Debugfeatures:

Das Teams-Toolkit führt während des Debugprozesses Hintergrundfunktionen aus, einschließlich der Überprüfung der für das Debuggen erforderlichen Voraussetzungen. Sie können den Fortschritt des Überprüfungsprozesses im Ausgabekanal von Teams Toolkit anzeigen. Im Setupprozess können Sie Ihre Teams-App registrieren und konfigurieren.

Debugging starten

Sie können F5 als einzelnen Vorgang drücken, um das Debuggen zu starten. Das Teams-Toolkit beginnt mit der Überprüfung der Voraussetzungen, registriert Microsoft Azure Active Directory -App (Azure AD) und die Teams-App und registriert den Bot, startet Dienste und startet den Browser.

Debuggen mit mehreren Zielen

Teams Toolkit nutzt die Multi-Target-Debugging-Funktion zum gleichzeitigen Debuggen von Registerkarten, Bots, Nachrichtenerweiterungen und Azure Functions.

Umschalthaltepunkte

Sie können Haltepunkte in den Quellcodes von Registerkarten, Bots, Nachrichtenerweiterungen und Azure Functions umschalten. Die Haltepunkte werden ausgeführt, wenn Sie in einem Webbrowser mit der Teams-App interagieren. Die folgende Abbildung zeigt den Haltepunkt umschalten:

Umschalthaltepunkte

Hot Reload

Sie können die Quellcodes von Registerkarten, Bots, Nachrichtenerweiterungen und Azure Functions gleichzeitig beim Debuggen der Teams-App aktualisieren und speichern. Die App wird neu geladen, und der Debugger wird erneut an die Programmiersprachen angefügt.

hot-reload für Quellcodes

Debuggen beenden

Wenn Sie das lokale Debuggen abgeschlossen haben, können Sie beenden (UMSCHALT+F5) oder [Alt] Trennen (UMSCHALT+F5) auf der symbolleiste des unverankerten Debuggens auswählen, um alle Debugsitzungen zu beenden und Aufgaben zu beenden. Die folgende Abbildung zeigt die Aktion „Debuggen beenden“:

Debuggen beenden

Vorbereiten des Debuggens

Die folgenden Schritte helfen Ihnen bei der Vorbereitung auf das Debuggen:

Bei Microsoft 365 anmelden

Wenn Sie sich bereits für Microsoft 365 registriert haben, melden Sie sich bei Microsoft 365 an. Weitere Informationen finden Sie unter Microsoft 365-Entwicklerprogramm.

Umschalthaltepunkte

Stellen Sie sicher, dass Sie Haltepunkte für die Quellcodes von Registerkarten, Bots, Nachrichtenerweiterungen und Azure Functions umschalten können. Weitere Informationen finden Sie unter Umschalten von Haltepunkten.

Anpassen von Debugeinstellungen

Mit dem Teams-Toolkit können Sie die Debugeinstellungen anpassen, um Ihre Registerkarte oder Ihren Bot zu erstellen. Weitere Informationen zur vollständigen Liste der anpassbaren Optionen finden Sie in der Dokumentation zu Debugeinstellungen.

Sie können auch Debugeinstellungen für Ihre vorhandene Bot-App anpassen.

Erfahren Sie, wie Sie einen vorhandenen Bot zum Debuggen verwenden.

Wenn Sie einen vorhandenen Bot verwenden möchten, können Sie ihn mit den Argumenten botId und botPassword im Task Bot einrichten einrichten einrichten. Diese Aufgabe besteht darin, Ressourcen zu registrieren und lokale Startinformationen für Bot vorzubereiten.

Verwenden Sie das folgende Codeausschnittbeispiel, um einen vorhandenen Bot für das Debuggen einzurichten:

{
    "label": "Set up Bot",
    "type": "teamsfx",
    "command": "debug-set-up-bot",
    "args": {
        //// Use your own AAD App for bot
        // "botId": "",
        // "botPassword": "", // use plain text or environment variable reference like ${env:BOT_PASSWORD}
        "botMessagingEndpoint": "api/messages"
    }
}
  1. Aktualisieren Sie botId mit der Client-ID der Azure AD-App für Ihren vorhandenen Bot.
  2. Aktualisieren Sie botPassword mit dem geheimen Clientschlüssel der Azure AD-App für Ihren Bot.

Anpassen von Szenarien

Im Folgenden finden Sie eine Liste der Debugszenarien, die Sie verwenden können:

Überspringen von Voraussetzungsprüfungen

Aktualisieren .fx/configs/tasks.json Sie in unter"prerequisites""Validate & install prerequisites">"args"> die Voraussetzungsprüfungen, die Sie überspringen möchten.

Überspringen der Voraussetzungsprüfungen

Verwenden Ihres Entwicklungszertifikats
  1. Deaktivieren .fx/configs/tasks.jsonSie "devCert" in unter "Validate & install prerequisites""prerequisites">"args">.
  2. Legen Sie "SSL_CRT_FILE" und "SSL_KEY_FILE" in .env.teamsfx.local auf Ihren Zertifikatdateipfad und Schlüsseldateipfad fest.
Anpassen von NPM-Installationsargumenten

Legen .fx/configs/tasks.jsonSie in npmInstallArgs unter "Install npm packages"fest.

Installieren des npm-Pakets

Ändern von Ports
  • Bot
    1. "3978" Suchen Sie im gesamten Projekt nach , und suchen Sie nach Darstellungen in tasks.json, ngrok.yml und index.js.
    2. Ersetzen Sie es durch Ihren Port. Ersetzen Ihres Ports für bot
  • Tab
    1. Suchen Sie in .fx/configs/tasks.jsonnach "53000".
    2. Ersetzen Sie es durch Ihren Port. Ersetzen Des Ports für Registerkarte
Verwenden Ihres eigenen App-Pakets

Legen .fx/configs/tasks.jsonSie in unter "Build & upload Teams manifest" auf den Pfad Ihres App-Pakets fest"appPackagePath".

Verwenden Ihres eigenen App-Paketpfads

Verwenden Eines eigenen Tunnels

  1. In .fx/configs/tasks.json können Sie unter "Start Teams App Locally"aktualisieren "Start Local tunnel".

    Verwenden Eines eigenen Tunnels

  2. Starten Sie Ihren eigenen Tunneldienst, und aktualisieren "botMessagingEndpoint" Sie dann unter auf "Set up bot"Ihren eigenen Nachrichtenendpunkt in .fx/configs/tasks.json .

    Messagingendpunkt aktualisieren

Hinzufügen von Umgebungsvariablen

Sie können der .env.teamsfx.localDatei Umgebungsvariablen für Registerkarte, Bot, Nachrichtenerweiterung und Azure Functions hinzufügen. Das Teams-Toolkit lädt die Umgebungsvariablen, die Sie hinzugefügt haben, um Dienste während des lokalen Debuggens zu starten.

Hinweis

Stellen Sie sicher, dass Sie einen neuen lokalen Debugvorgang starten, nachdem Sie neue Umgebungsvariablen hinzugefügt haben, da die Umgebungsvariablen hot reload nicht unterstützen.

Teilkomponente debuggen

Teams Toolkit nutzt Visual Studio Code Multi-Target-Debugging zum gleichzeitigen Debuggen von Registerkarten, Bots, Nachrichtenerweiterungen und Azure-Funktionen. Sie können .vscode/launch.json und .vscode/tasks.json aktualisieren, um Teilkomponenten zu debuggen. Wenn Sie die Registerkarte nur in einer Registerkarte plus Bot mit Azure Functions Projekt debuggen möchten, führen Sie die folgenden Schritte aus:

  1. Aktualisieren Sie "Attach to Bot" und "Attach to Backend" aus der Debugverbindung in .vscode/launch.json.

    {
    "name": "Debug (Edge)",
     "configurations": [
        "Attach to Frontend (Edge)",
        // "Attach to Bot",
        // "Attach to Backend""
        ],
        "preLaunchTask": "Pre Debug Check & Start All",
        "presentation": {
            "group": "all",
            "order": 1
        },
        "stopAll": true

}

  2. Aktualisieren Sie "Start Backend" und "Start Bot" aus der Aufgabe Alle starten in .vscode/tasks.json.

    {

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

      ]

}

Weiter

Lokales Debuggen Ihrer App

Siehe auch