Freigeben über

Debuggen für Mobilgerät

  • Artikel

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:

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

  1. 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.

  2. 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.

  3. Entfernen Sie TAB_DOMAIN und TAB_ENDPOINT aus der teamsapp.local.yml Datei.

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

  4. Wenn Sie React verwenden, fügen Sie die Konfiguration WDS_SOCKET_PORT=0 in teamsapp.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

  5. 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.

    Screenshot: Remotestart der App

    1. Sie werden aufgefordert, eine benutzerdefinierte App in Teams hochzuladen. Klicken Sie auf Hinzufügen.

      Screenshot: Installation einer App

      Die App wird als persönliche Registerkarte geöffnet.

      Screenshot der App-Seite

Testen Ihrer Registerkarten-App auf einem mobilen Client

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

    Screenshot: Option

    Hinweis

    Wenn Sie die App zuvor gedebuggt haben, wird empfohlen, 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.

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

Screenshot: Löschen der App-Daten im mobilen iOS-Client für die Registerkarte

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

    Screenshot: Microsoft 365-Anmeldeseite

    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.

  2. Ihre erste mobile Registerkarten-App wird erstellt.

    Screenshot der mobilen Registerkarten-App

  3. 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

  1. 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 wird, 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.

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

Screenshot: Löschen der App-Daten im mobilen iOS-Client für Bot

  1. Ihre erste mobile Bot-App wird erstellt.

    Screenshot: Bot-App im mobilen Client