Teilen über

Lokales Debuggen Ihrer Teams-App

  • Artikel

Das Microsoft Teams-Toolkit hilft Ihnen, Ihre Microsoft Teams-App lokal zu debuggen und eine Vorschau anzuzeigen. Während des Debugprozesses startet Teams Toolkit automatisch App-Dienste, startet Debugger und lädt die Teams-App hoch. Sie können Ihre Teams-App nach dem Debuggen lokal im Teams-Webclient anzeigen.

Lokales Debuggen Ihrer Teams-App für Visual Studio Code

Das Teams-Toolkit in Microsoft Visual Studio Code bietet Ihnen die Features zum automatisieren des lokalen Debuggens Ihrer Teams-App. Visual Studio Code ermöglicht ihnen das Debuggen von Registerkarten, Bots und Nachrichtenerweiterungen. Sie müssen das Teams-Toolkit einrichten, bevor Sie Ihre App debuggen.

Hinweis

Ihr altes Teams Toolkit-Projekt wird aktualisiert, um neue Aufgaben zu verwenden. Weitere Informationen finden Sie im Aufgabendokument.

Einrichten Ihres Teams-Toolkits für das Debuggen

Die folgenden Schritte helfen Ihnen beim Einrichten Ihres Teams-Toolkits, bevor Sie den Debugprozess initiieren:

  1. Wählen Sie debuggen in Teams (Edge) oder Debuggen in Teams (Chrome) aus der Dropdownliste AUSFÜHREN UND DEBUGGEN aus .

    Screenshot: Option

  2. Wählen Sie Debuggen starten ausführen>(F5) aus.

    Screenshot: Option

  3. Wählen Sie Create a Microsoft 365 Testing Tenant to Microsoft 365 account (Microsoft 365-Testmandant für Microsoft 365-Konto erstellen) aus.

    Screenshot: Hervorgehobene Option

    Tipp

    Sie können Erstellen eines Microsoft 365-Testmandanten auswählen, um mehr über das Microsoft 365-Entwicklerprogramm zu erfahren. Ihr Standardwebbrowser wird geöffnet, damit Sie sich mit Ihren Anmeldeinformationen bei Ihrem Microsoft 365-Konto anmelden können.

  4. Wählen Sie Installieren aus, um das Entwicklungszertifikat für localhost zu installieren.

    Screenshot: Zu installierende Zertifikat

    Tipp

    Sie können Weitere Informationen auswählen, um mehr über das Entwicklungszertifikat zu erfahren.

  5. Wählen Sie im Dialogfeld Sicherheitswarnung die Option Ja aus.

    Screenshot: Zertifizierungsstelle zum Installieren des Zertifikats

Das Toolkit startet eine neue Microsoft Edge- oder Chrome-Browserinstanz basierend auf Ihrer Auswahl und öffnet eine Webseite zum Laden des Teams-Clients.

Debuggen Ihrer App

Nach dem ersten Setupvorgang startet Teams Toolkit die folgenden Prozesse:

Startet App-Dienste

Führt Tasks wie in definiert aus .vscode/tasks.json. Standardmäßig lautet "Start application"der Aufgabenname . Wenn Ihr Projekt mehr als eine Komponente enthält, gibt es mehr abhängige Aufgaben.

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

Die folgende Abbildung zeigt Aufgabennamen auf den Registerkarten AUSGABE und TERMINAL von Visual Studio Code während der Ausführung der Registerkarte, der Bot- oder Nachrichtenerweiterung und Azure Functions.

Screenshot: App-Dienste starten

Starten des lokalen Tunnels

Verwenden Sie den Entwicklungstunnel als lokalen Tunneldienst, um ihren lokalen Botnachrichtenendpunkt öffentlich zu machen.

Entwicklungstunnel

Um Den lokalen Tunneltask aus einem v4-Projekt manuell zu migrieren, aktualisieren Sie den folgenden Code in der .vscode/tasks.json Datei:

{
      "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"
    },

Um einen anderen Port für den lokalen Botdienst zu verwenden, ändern Sie den portNumber in der .vscode/tasks.json Datei und auch den portNumber in der index.js Datei oder index.ts .

In der folgenden Tabelle sind die erforderlichen Argumente aufgeführt:

Argumente Typ Erforderlich Beschreibung
type string Erforderlich Der Typ des zu verwendenden Tunneldiensts. Dieses Argument muss auf dev-tunnelfestgelegt werden.
env string Optional Der Umgebungsname. Teams Toolkit schreibt die in definierten Umgebungsvariablen in output eine .env.<env> Datei.
ports Array Erforderlich Ein Array von Portkonfigurationen, die jeweils die lokale Portnummer, das Protokoll und die Zugriffssteuerungseinstellungen angeben.

Das ports Argument muss ein Array von -Objekten sein, wobei jedes Objekt die Konfiguration für einen bestimmten Port angibt. Jedes Objekt muss die folgenden Felder enthalten:

Port Typ Erforderlich Beschreibung
portNumber number erforderlich Die lokale Portnummer des Tunnels.
protocol string erforderlich Das Protokoll des Tunnels.
access string Optional Die Zugriffssteuerungseinstellung für den Tunnel. Dieser Wert kann auf private oder publicfestgelegt werden. Falls keine Angabe erfolgt, ist der Standardwert private.
writeToEnvironmentFile Objekt Optional Der Schlüssel der Umgebungsvariablen des Tunnelendpunkts und der Tunneldomäne, die in die .env Datei geschrieben werden.

Das writeToEnvironmentFile -Objekt enthält zwei Felder:

WriteToEnvironmentFile Typ Erforderlich Beschreibung
endpoint string Optional Der Schlüssel der Umgebungsvariable des Tunnelendpunkts.
domain Zeichenfolge Optional Der Schlüssel der Umgebungsvariablen der Tunneldomäne.

Wenn writeToEnvironmentFile enthalten ist, werden die angegebenen Umgebungsvariablen in die .env Datei geschrieben. Wenn das Feld nicht angegeben wird, werden keine Umgebungsvariablen in die Datei geschrieben.

Startet Debugkonfigurationen

Startet die Debugkonfigurationen, wie in .vscode/launch.jsondefiniert.

Screenshot: Startdebugger

In der folgenden Tabelle sind die Debugkonfigurationsnamen und -typen für Projekte mit Registerkarte, Bot- oder Nachrichtenerweiterungs-App und Azure Functions aufgeführt:

Komponente Debugkonfigurationsname Debugkonfigurationstyp
Tab Anfügen an Front-End (Edge) oder Anfügen an Front-End (Chrome) msedge oder chrome
Bot- oder Nachrichtenerweiterungen An Bot anfügen Knoten
Azure Functions An Back-End anfügen Knoten

In der folgenden Tabelle sind die Debugkonfigurationsnamen und -typen für Projekte mit Bot-App, Azure Functions und ohne Registerkarten-App aufgeführt:

Komponente Debugkonfigurationsname Debugkonfigurationstyp
Bot- oder Nachrichtenerweiterung Starten des Bots (Edge) oder Starten des Bots (Chrome) msedge oder chrome
Bot- oder Nachrichtenerweiterung An Bot anfügen Knoten
Azure Functions An Back-End anfügen Knoten

Lädt die Teams-App hoch

Die Konfiguration An Front-End anfügen oder App starten startet Microsoft Edge- oder Chrome-Browserinstanz, um den Teams-Client auf der Webseite zu laden. Nachdem der Teams-Client geladen wurde, laden Sie die Teams-App hoch, die durch die Upload-URL gesteuert wird, die in den Startkonfigurationen von Microsoft Teams definiert ist. Wenn der Teams-Client im Webbrowser geladen wird, wählen Sie Hinzufügen aus, oder wählen Sie eine Option aus der Dropdownliste gemäß Ihren Anforderungen aus.

Screenshot: Lokales Debuggen hinzufügen

Ihre App wird Teams hinzugefügt!

Nächster Schritt

Debuggen des Hintergrundprozesses

Siehe auch