Freigeben über

Debuggen Sie Ihre Teams-App

  • Artikel

Das Microsoft 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 hoch.
  • 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 Entra App, 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

Teams-App-Testtool

Mit dem Teams App-Testtool können Sie Ihre botbasierten Apps mühelos debuggen. Sie können mit Ihrem Bot chatten und seine Nachrichten und adaptiven Karten so anzeigen, wie sie in Teams angezeigt werden. Sie benötigen kein Microsoft 365-Entwicklerkonto, kein Tunneling oder keine Teams-App- und Bot-Registrierung, um das Testtool verwenden zu können. Weitere Informationen finden Sie unter Teams App Test Tool.

Debuggen von Apps im Teams-Desktopclient

Das Microsoft Teams-Toolkit unterstützt Sie beim Debuggen und Anzeigen einer Vorschau Ihrer Microsoft Teams-App im Desktopclient. Weitere Informationen finden Sie unter Debuggen von Apps im Teams-Desktopclient.

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.

Teams Toolkit erstellt standardmäßig Microsoft Entra-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 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

}

  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