Lokales Debuggen Ihrer Teams-App

Artikel
08/11/2023

Das Teams-Toolkit hilft Ihnen, Ihre Microsoft Teams-App lokal zu debuggen und eine Vorschau anzuzeigen. Während des Debugvorgangs startet das Teams-Toolkit automatisch App-Dienste, startet Debugger und lädt die Teams-App quer. 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:

Windows
macOS

Wählen Sie debuggen (Edge) oder Debuggen (Chrome) aus der Dropdownliste AUSFÜHREN UND DEBUGGEN aus .
Wählen Sie Debuggen starten ausführen>(F5) aus.
Wählen Sie Create a Microsoft 365 Testing Tenant to Microsoft 365 account (Microsoft 365-Testmandant für Microsoft 365-Konto erstellen) aus.

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.
Wählen Sie Installieren aus, um das Entwicklungszertifikat für localhost zu installieren.

Tipp

Sie können Weitere Informationen auswählen, um mehr über das Entwicklungszertifikat zu erfahren.
Wählen Sie im Dialogfeld Sicherheitswarnung die Option Ja aus.

Toolkit startet einen neuen Microsoft Edge- oder Chrome-Browser instance 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
Startet Debugkonfigurationen
Lädt die Teams-App quer

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.

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-tunnel`festgelegt 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 `public`festgelegt 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`	string	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 Namen und Typen der Debugkonfiguration 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 quer

Mit der Konfiguration An Front-End anfügen oder App starten wird der Microsoft Edge- oder Chrome-Browser instance gestartet, um den Teams-Client auf der Webseite zu laden. Nachdem der Teams-Client geladen wurde, wird die Teams-App quergeladen, die von der url für das Querladen 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.

Ihre App wird Teams hinzugefügt!

Nächster Schritt

Debuggen des Hintergrundprozesses

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 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 quer. Sie können Ihre Teams-App nach dem Debuggen lokal im Teams-Webclient anzeigen.