移动设备调试

构建包含选项卡、机器人或消息扩展的 Microsoft Teams 应用时,必须调试应用,以了解该应用在 Android 和 iOS Microsoft Teams 移动客户端上的运行方式。 有关详细信息,请参阅 在本地调试 Teams 应用

观看以下视频,了解如何在移动客户端中调试 Teams 应用:

调试选项卡应用

若要调试选项卡应用,请执行以下步骤:

可以在Visual Studio Code的“资源管理器”下查看项目文件夹和文件。

  1. task.json 文件中添加 Start local tunnelValidate prerequisites,使选项卡应用在移动客户端上可访问。

  2. 在 文件中的 task.json 属性dependsOrder后面添加以下代码。

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

    注意

    • 若要仅在移动客户端中预览选项卡应用,请将 属性的值 access 设置为 private
    • 当开发隧道访问值设置为 private时,选项卡应用不能显示在 Web 客户端上的 iframe 中。 登录页托管在 login.microsoftonline.com 上,其 X-FRAME-Options 标头设置为 DENY。
    • 若要在移动客户端上预览选项卡应用并在 Web 客户端上调试它,请将访问值设置为 public。 具有应用 URL 的任何用户可以访问选项卡。
  3. teamsapp.local.yml文件中删除 TAB_DOMAINTAB_ENDPOINT

    - uses: script 
      with:
        run:
          echo "::set-teamsfx-env TAB_DOMAIN=localhost:53000";
          echo "::set-teamsfx-env TAB_ENDPOINT=https://localhost:53000";
    
  4. 如果使用 React,请在文件中添加配置WDS_SOCKET_PORT=0teamsapp.local.yml,以在使用隧道服务后在 React 中调试时激活热重载。

      - 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. 运行已部署的应用

    1. (Ctrl+Shift+D 打开调试面板,或从Visual Studio Code查看>运行) 。
    2. 从启动配置下拉列表 中选择“在 Teams (Edge) 中启动远程”。
    3. 选择“开始调试 (F5) ”按钮。

    屏幕截图显示如何远程启动应用。

    1. 系统会提示将自定义应用上传到 Teams。 选择“添加”。

      显示正在安装的应用的屏幕截图。

      应用将作为个人选项卡打开。

      屏幕截图显示个人选项卡应用页面。

在移动客户端上测试选项卡应用

  1. 若要查找预览应用,请在移动设备上打开 Teams,然后选择“ 更多”。

    屏幕截图显示了 Teams 移动客户端中的“更多”选项。

    注意

    如果之前调试过应用,建议清除移动设备上的缓存,以确保立即进行应用同步。 清除缓存后,应用需要一些时间进行同步。

若要清除 Teams 应用数据,请转到 “设置>”“Teams>清除应用数据”。

屏幕截图显示如何在 iOS 移动客户端中清除选项卡的应用数据。

  1. 如果是首次访问开发隧道,请登录到 Microsoft 365 帐户并选择“ 继续”。

    屏幕截图显示了 Microsoft 365 登录页。

    注意

    每个设备只需登录一次,每次安装应用时,都需要确认防钓鱼页面。

  2. 创建第一个移动选项卡应用。

    屏幕截图显示了移动选项卡应用。

  3. 对于 Android 设备,请在选项卡运行时使用 DevTools 调试选项卡。

在移动客户端上测试机器人应用

  1. 若要在移动客户端中测试机器人,请遵循在机器人 的移动客户端上测试选项卡应用 中列出的步骤。

    注意

    如果之前调试了机器人应用,并且应用清单 (以前称为 Teams 应用清单) 文件发生更改,我们建议清除移动设备上的缓存,以确保立即实现应用同步。 清除缓存后,应用需要一些时间进行同步。

若要清除 Teams 应用数据,请转到 “设置>”“Teams>清除应用数据”。

屏幕截图显示如何在适用于机器人的 iOS 移动客户端中清除应用数据。

  1. 创建第一个移动机器人应用。

    显示移动客户端中的机器人应用的屏幕截图。