Lokales Debuggen Ihrer Teams-App
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:
Wählen Sie debuggen in Teams (Edge) oder Debuggen in Teams (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.
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.
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.
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.
Ihre App wird Teams hinzugefügt!