Debuggen für Mobilgerät

Wenn Sie eine Microsoft Teams-App erstellen, die eine Registerkarte, einen Bot oder eine Nachrichtenerweiterung enthält, müssen Sie Ihre App debuggen, um zu wissen, wie die App sowohl auf mobilen Android- als auch auf iOS-Microsoft Teams-Clients funktioniert. Weitere Informationen finden Sie unter Lokales Debuggen Ihrer Teams-App.

Im folgenden Video erfahren Sie, wie Sie Ihre Teams-App in mobilen Clients debuggen:

Debuggen Ihrer Registerkarten-App

Führen Sie die folgenden Schritte aus, um Ihre Registerkarten-App zu debuggen:

Visual Studio Code
Befehlszeile

Sie können die Projektordner und -dateien unter Explorer in Microsoft Visual Studio Code anzeigen.

Fügen Sie in der task.json Datei nach Validate prerequisites hinzuStart local tunnel, um die Registerkarten-App auf dem mobilen Client zugänglich zu machen.

Fügen Sie den folgenden Code nach der -Eigenschaft dependsOrder in der task.json Datei hinzu.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Teams App Locally",
      "dependsOn": [
        "Validate prerequisites",
        "Start local tunnel", // Add this line
        "Provision",
        "Deploy",
        "Start application"
      ],
      "dependsOrder": "sequence"
    },
    {
      // Add this task
      "label": "Start local tunnel",
      "type": "teamsfx",
      "command": "debug-start-local-tunnel",
      "args": {
        "type": "dev-tunnel",
        "ports": [
          {
            "portNumber": 53000,
            "protocol": "https",
            "access": "private",
            "writeToEnvironmentFile": {
              "endpoint": "TAB_ENDPOINT",
              "domain": "TAB_DOMAIN"
            }
          }
        ],
        "env": "local"
      },
      "isBackground": true,
      "problemMatcher": "$teamsfx-local-tunnel-watch"
    }
  ]
}

Hinweis

Um eine Vorschau der Registerkarten-App nur im mobilen Client anzuzeigen, legen Sie den Wert für access die -Eigenschaft auf fest private.
Wenn der Wert für den Dev Tunnel-Zugriff auf privatefestgelegt ist, kann die Registerkarten-App nicht innerhalb eines iFrames auf dem Webclient angezeigt werden. Die Anmeldeseite wird auf login.microsoftonline.com gehostet, deren X-FRAME-Options Header auf DENY festgelegt ist.
Um eine Vorschau der Registerkarten-App auf dem mobilen Client anzuzeigen und sie auf Webclients zu debuggen, legen Sie den Zugriffswert auf fest public. Jeder Benutzer mit der APP-URL kann die Registerkarte aufrufen.

Entfernen Sie TAB_DOMAIN und TAB_ENDPOINT aus der m365agents.local.yml Datei.

- uses: script 
  with:
    run:
      echo "::set-teamsfx-env TAB_DOMAIN=localhost:53000";
      echo "::set-teamsfx-env TAB_ENDPOINT=https://localhost:53000";

Wenn Sie React verwenden, fügen Sie die Konfiguration WDS_SOCKET_PORT=0 in m365agents.local.yml der Datei hinzu, um hot reloading während des Debuggens in React nach Verwendung des Tunneldiensts zu aktivieren.

  - uses: file/createOrUpdateEnvironmentFile
    with:
      target: ./.localConfigs
      envs:
        BROWSER: none
        HTTPS: true
        PORT: 53000
        SSL_CRT_FILE: ${{SSL_CRT_FILE}}
        SSL_KEY_FILE: ${{SSL_KEY_FILE}}
        REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}} 
        REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html 
        WDS_SOCKET_PORT: 0

Ausführen der bereitgestellten App
1. Öffnen Sie den Debugbereich (STRG+UMSCHALT+D oder Ausführung anzeigen>) in Visual Studio Code.
2. Wählen Sie remote in Teams (Edge) starten aus der Dropdownliste Startkonfiguration aus.
3. Wählen Sie die Schaltfläche Debuggen starten (F5) aus.
4. Wählen Sie Hinzufügen aus, um die benutzerdefinierte App in Teams hochzuladen.
5. Klicken Sie auf Öffnen.
  
  Die App wird als persönliche Registerkarte geöffnet.

Es ist ein Problem aufgetreten.

Gehen Sie zu ngrok und registrieren Sie sich für ein kostenloses Konto oder melden Sie sich bei Ihrem bestehenden Konto an.
Nachdem Sie sich angemeldet haben, wählen Sie im linken Bereich Ihr Authentifizierungstoken aus.
Kopieren Sie den Wert Ihres Authtokens.
Führen Sie die ngrok.exe-Datei aus.
Führen Sie den Befehl aus ngrok http https://localhost:53000 --authtoken=<your-personal-ngrok-authtoken> , um den lokalen Tunneldienst zu starten.

Aktualisieren Sie in der env/.env.local Datei die Werte für TAB_DOMAIN und TAB_ENDPOINT.

 TAB_DOMAIN=sample-ngrok-id.ngrok.io 
 TAB_ENDPOINT=https://sample-ngrok-id.ngrok.io

Führen Sie die folgenden Befehle in Ihrem Projektverzeichnis aus:
1. atk provision --env local
2. atk deploy --env local
3. atk preview --env local

Es ist ein Problem aufgetreten.

Testen Ihrer Registerkarten-App auf einem mobilen Client

Um die Vorschau-App zu finden, öffnen Sie Teams auf Ihrem mobilen Gerät, und wählen Sie Mehr aus.

Hinweis

Wenn Sie die App zuvor gedebuggt haben, empfiehlt es sich, den Cache auf dem mobilen Gerät zu löschen, um eine sofortige App-Synchronisierung sicherzustellen. Nach dem Löschen des Caches dauert die Synchronisierung der App einige Zeit.

iOS
Android

Um die Teams-App-Daten zu löschen, wechseln Sie zu Einstellungen>Teams>App-Daten löschen.

Wenn Sie zum ersten Mal auf den Entwicklungstunnel zugreifen, melden Sie sich beim Microsoft 365-Konto an, und wählen Sie Weiter aus.

Hinweis

Sie müssen sich nur einmal pro Gerät anmelden, und bei jeder Installation der App müssen Sie die Antiphishing-Seite bestätigen.
Ihre erste mobile Registerkarten-App wird erstellt.
Verwenden Sie für Android-Geräte DevTools , um Die Registerkarte zu debuggen, während sie ausgeführt wird.

Testen Ihrer Bot-App auf einem mobilen Client

Führen Sie zum Testen Ihres Bots im mobilen Client die Schritte aus, die unter Testen Ihrer Registerkarten-App auf einem mobilen Client für Ihren Bot aufgeführt sind.

Hinweis

Wenn Sie die Bot-App zuvor gedebuggt haben und die App-Manifestdatei (früher Teams-App-Manifest genannt) geändert wurde, empfehlen wir, den Cache auf dem mobilen Gerät zu löschen, um die sofortige App-Synchronisierung sicherzustellen. Nach dem Löschen des Caches dauert die Synchronisierung der App einige Zeit.

iOS
Android

Um die Teams-App-Daten zu löschen, wechseln Sie zu Einstellungen>Teams>App-Daten löschen.

Ihre erste mobile Bot-App wird erstellt.

Feedback

War diese Seite hilfreich?

Last updated on 2025-05-20